Frage zu einem PHP script

[einsiedler]

Öhm doch:

/* +++ */
	section .secIMG  {
		margin: 0; padding: 0;
		width: 100%;
		max-width: 100%;
		border: 3px dotted yellow;
	}
	
	.secIMG figure {
		margin: 0; padding: 0;
		width: 100%;
		border: 1px dotted steelblue;
	}
	.secIMG figcaption {
		font-size: 0.97rem;
		text-align: center;
		padding-top: 0.6rem;
		border: 1px dotted indigo;
	}
	.secIMG img {
		display: block;
		width: auto;
		height: auto;
		margin: 0 auto;		
		border: 1px dotted orange;
	}
	
	.IMG1 {
		max-width:100%;
		max-height:69.09vh;   
		}
	.IMG2 {
		max-width:100%;
		max-height:52.875vh;  
		}
	.IMG3 {
		max-width:56.25%;
		max-height:94vh;     
		}
	.IMG4 {
		max-width:73.75%;
		max-height:94vh;
		}
	.IMG5 {
		max-width:100%;
		max-height:94vh;
		}
	.IMG6 {
		max-width:56.25%;
		max-height:94vh;
		}
	.IMG7 {
		max-width:81.875%;
		max-height:94vh;
		}
	.IMG8 {
		max-width:33.75%;
		max-height:94vh;
		}
	.IMG9 {
		max-width:100%;
		max-height:53.4625vh;  
		}
		
	video {
		
		}

Dort habe ich jedem einzelnen IMG (von .img1 ==> .img9) zusätzlich (als Klasse) noch eine maximale breite und höhe mitgegeben...

und es funktioniert…

Aber villeicht sind nur meine Browser von Opera über Chrome bis Firefox speziell so eingestellt das es nur bei mir funktioniert. Belert mich eines besseren und sagt mir halt mit einem screen-Beweis das ich falsch liege.

P.S.: Anmerkung: Habe gerade gesehen das der vh wert ein wenig niedriger sein muss, denn von 100% bis 110% skaliert es doch einmal. Muss da den vh wert nochmal justieren.

Villeicht auch deswegen:

P.S. Ich habe Dein Video über "Custom properties" angeschaut und finde diese mathematische herangehensweise auch sehr inteessant, sodas ich auch da "weiterdenken" mag. (Zurück zu den Wurzeln / Bildergalerie ) ist nicht schlecht!

Gruß der einsiewdelnde