Bild über die Höhe skalieren Problem mit height

Hallo Leute,

Ich bin ganz schön am Verzweifeln.

Mein problem: ich möchte verschiedene Bilder in einer Galerie beim Anklicken auf die Bildschirmgrösse skalieren.

Die Bilder liegen sowohl im Hoch als auch Querformat vor.

Ausgabe soll auf mobile Geräte optimiert sein.

Ist das Handy hochkant, ist alles kein Problem. Mit zum Beispiel width: 90%;

Werdsn beide Bildtypen korrekt bedient.

Wird allerdings gedreht (Querformat) klappt nix. Ich denke, als Orientierung muss mit height als Skaliergröße gearbeitet werden. Aber das klappt nicht.

Ich hab über Java Script die Bildauflösung abgefragt und kann bei dem Bild über if else individuell den css code manipulieren (je nach Seitenverhältnis)

Hier ein Code Beispiel :

if ( aspectvalue < 0 ) {

bigpicaspect2.innerHTML = " Hochformat" ;

document.getElementById('bigpic' ).style.cssText ="width:85%; height:auto; ";

} else {

bigpicaspect2.innerHTML = " Querformat" ;

document.getElementById('bigpic' ).style.cssText ="width:auto; height:85% ";

}

Wo ist der Denkfehler?

Hallo Sempervivum,

Danke für deinen Post.

if ( aspectvalue < 0 ) {....

Abfrage wie im Post mit größer / kleiner Null. Weil unter Null das seitenverhältnis kippt.

Ich hab Breite minus Höhe gerechnet, solange der wert negativ ist, ist das Verhältnis hochkant. Bei Null hätten wir ein Quadrat. Ab dem positiven Bereich kippt das Verhältnis immer mehr ins Querformat.

Object-fit hatte ich bereits probiert. Aber das Ergebnis war ernüchternd. Aber ich probiere gleich nochmal rum. Vieleicht sind ja auch die umliegenden Container schuld...

ZUSATZ 1:

Das Css switching mit Javascript funktioniert. Hab beim css setting für das Querverhältnis jetzt mal fixe Größen in Pixeln zum test angegeben. DIe werden korrekt übermittelt. Im test ist das Bild dann zwar verzehrt (hab beliebige Werte verwendet) aber sie werden korrekt umgesetzt.

Sempervivum:

Ich poste hier noch mal den edit, den ich eben gemacht hatte, damit es nicht untergeht (sorry fürs doppelt)

if ( aspectvalue < 0 ) {....

Abfrage wie im Post mit größer / kleiner Null. Weil unter Null das seitenverhältnis kippt.

Ich hab Breite minus Höhe gerechnet, solange der wert negativ ist, ist das Verhältnis hochkant. Bei Null hätten wir ein Quadrat. Ab dem positiven Bereich kippt das Verhältnis immer mehr ins Querformat.

Zitat von Sempervivum

Bei object-fit ist ein möglicher Fallstrick: Es funktioniert nur, wenn man dem Bild Höhe und Breite gegeben hat, damit der Browser weiß, wie er es einpassen muss.

Da liegt ja der Hund begraben. Die Höhe und Breite des Bildes muss flexibel, aber proportional bleiben. Volle Bildschirm breite (bzw 90% damit schicker Rand...) bei hochkant. Bei Querformat muss über die bildschirmhöhe scaliert werden.

Die entstehenden bildgrössen sind aber immer unterschiedlich, wegen der verschiedenen Geräte - > Handy, Tablet, PC....