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

[j4nk3y]

Moin,

Hat :

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

möglicherweise unerwünschte auswirkungen?

Gruß Jo

[einsiedler]

Moin,

habe ich so mal irgendwo gelesen:

Responsive Images basics:

img { max-width: 100%; height: auto; }

Das Bild passt sich somit immer dem Container an, wird aber nie größer als seine eigentliche Originalgröße in Pixel. Das dürfe sicherlich bekannt sein. (...)

However.....

[j4nk3y]

Moin,

habe ich so mal irgendwo gelesen:

Responsive Images basics:

img { max-width: 100%; height: auto; }

Das Bild passt sich somit immer dem Container an, wird aber nie größer als seine eigentliche Originalgröße in Pixel. Das dürfe sicherlich bekannt sein. (...)

Ja, dachte nur ob das vllt irgendwo mit einer anderen Angabe kollidiert.

Gruß Jo

[j4nk3y]

Kleiner zusatz wo es mir gerade auffällt,

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.

Alle deine Größen angaben sind doch in %,vw, vh sprich vom viewport abhängig. Der Abstand wird also beibehalten eben nur kleiner bei verkleinerung des Viewports.

Bei mir in Chrome schaut das richtig aus, nur ff verschiebt die bilder "komisch" (Fenster verkleinerung in y-Richtung vergrößert den ZR oben, sodass das Bild aus dem Fenster verschwindet).

Gruß Jo

[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

[marctrix]

Hej einsiedler,

der Code ist natürlich schon sehr umfangreich, sich da einzulesen, dauert schon recht lange. Ohne das jetzt getan zu haben, könntest Du noch einen anderen Ansatz versuchen, der nicht viel Zeit kostet (ich rate sonst nicht gerne zum rumprobieren, weil ich nicht gerne die Zeit des Fragenden verschwende, hier mache ich es aber mal angesichts der Tatsache, dass noch keiner einen besseren Vorschlag gemacht hat):

Die Einheiten vw, vh, vmin und vmax beziehen sich ja auf die Breite des Viehports, wie du weißt, das finde ich sehr häufig schwer zu handeln. Meistens ist die Breite des Elternelementes ein sinnvollerer und leichter zu handelnder Bezugspunkt. Daher mein Rat: gebe die Breiten mal in %, statt in vw an. Das geht ja recht schnell und vielleicht löst das dein Problem...

Marc