Geheimnisse der IMG - Skalierung

[einsiedler]

Hallo liebes Forum,

Um mein Problem bildlicher zu machen, hab ich mal ein Bildschirmscreen vorbereitet. Ich versuche immer noch zu ergründen wie die Bildskalierung funktioniert.

Bildschirmscreen / Bildskalierung

Doch komme ich nicht dahinter. Bitte könnt ihr mir das mal erläutern:

Wie ich media-queries einsetze um mein Problem zu händeln!

Bisher sieht mein CSS so aus:

  div {
		display: flex;
    flex-wrap: wrap;
		justify-content: space-between;
	}
	.blog figure {
		flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 60.8%;
    -ms-flex-preferred-size: 60.8%;
	}
	figure {
		min-width: 0;
    max-width: 100%;
		margin: 0 auto;
	}
	.blog figcaption {
		font-size: 0.97rem;
		text-align: center;
		padding-top: 0.5rem;
	}
	img {
		display: block;
    max-width: 100%;
    max-height: 100vh;
		margin: 0 auto;
	}
	video {
		display: block;
		max-width: 100%; 
		height: calc(150% * 9 / 16);
		}

Doch das ist noch NICHT so wie ich es mir wünsche!

Da müssen villeicht noch ein oder mehrere:

@media all and (max-width: XXX px) { XXX { } }

hin!

Viele Variationen hab ich schon ausprobiert!

Als allerletzten Versuch würde ich das IMG in ein mit Prozent- oder vw / vh Angaben versehenes <figure> "einklemmen"!

Wie ich DANN aber das prozentuale Bild auf voller Breite bekomme WENN das Bildschirmfenster maximal zusammengeschoben ist, ist ein Folgeproblem!

Aber das müsste doch noch anders gehen oder? Nur wie?

Fragende Grüsse

der geduldige einsiedelnde