Bilder-Galerie

[einsiedler]

Ich möchte nocheinmal verdeutlichen was ich meine:

Die Höhe der Bilder (die unterschiedlich hoch als auch breit sind!) soll max die Höhe von #mediaboxspan (also der gelben gestrichelten Linie) einnehmen.

Die Bilder sollen sich beim zusammenziehen des Bildschirmfensters ebenfalls proportional zusammenziehen (im richtigen aspect ratio) aber nicht grösser werden.

Mein Problem sind die unterschiedlichen breiten der Bilder im horizontalen als auch im vertikalen, denn dann machen die nicht das, was sie sollen.

Ich habe viele variationen von witdt height max-width min witdh gesetzt um das zu beeinflussen habe aber noch nicht die richtige Kombination gefunden.

Ich habe zur verfügung:

img, video {
	width: 100%;
	height: auto;
	}

/* die schwarze gestrichelte Linie */

#frasetmediamodul {
                
                display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				
                box-sizing: border-box;
				
				-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;

				-webkit-box-align: center;
				-webkit-align-items: center;
				-ms-flex-align: center;
				align-items: center;

				-webkit-justify-content: space-around;
				-ms-flex-pack: distribute;
				justify-content: space-around;

				-webkit-box-ordinal-group:3;
				-webkit-order:2;
				-ms-flex-order:2;
				order:2;
				
                width: 58vw;
		  min-width: 58vw;
		  }



/* die gelbe gestrichelte Linie */

#mediaboxspan {
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
				
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
			
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			
			background-color: rgb(255,255,255);
			background-color: rgba(255,255,255,.45);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=45);
			z-index: 1;
			
			min-height: 700px;						
			}

#frasetmediaspan  {
                display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				
                -webkit-box-align: center;
				-webkit-align-items: center;
				-ms-flex-align: center;
				align-items: center;
				
				max-width: 49.48vw;
				max-height: 76.34vh;
				}

Bei schmaleren Bildern (in der Breite) zieht sich #mediaboxspan zusammen bis die Breite des Bildes erreicht ist dann geht es nicht mehr weiter. Aber da würde ich gerne den rechten und linken Luft Raum erhalten, diese Zwischenräume sollen so bleiben.

Ich komme einfach nicht weiter, kann mich bitte jemand unterstützen, ich weiss kein Rat mehr.

Live-Version: Linkbeschreibung

Quelltext siehe auch: Linkbeschreibung

Grüsse der Siedelnde