Bilder-Galerie

[einsiedler]

So langsam gehen mir die Ideen aus um max-width, min-width, max-height und min-height mit Werten in % , vw und vh einzusetzen.

Momentan sieht es so aus: Linkbeschreibung (Ich bin noch lange nicht mit fertig!)

(Wie im o.g. jpg) zu sehen: die Bildhöhe , vh (also die Höhe der gelben gestrichelten Box) sollte genau immer die Höhe behalten und nicht höher werden, zum Beispiel beim Bildschrirmfenster zusammenziehen.

Bei schmaleren Bildern sollte beim zusammenziehen des Bildschirmfensters (strg++) die Zwischenräume (ZR genannt) bis zur gelben gestrichelten Box beibehalten werden. Sowohl im horizontalen wie auch im vertikalen (also zum Beispiel bei schmaleren Bildern!). Bis jetzt macht es das nicht.

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;
				}

siehe auch: Linkbeschreibung

Wer kann mir da Bitte einen Tipp geben!

Grüsse der Siedelnde