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?

  • Für das Problem gibt es eine relativ einfache Lösung, ohne dass man selber das CSS für Höhe und Breite aus dem Seitenverhältnis berechnen muss:

    https://developer.mozilla.org/de/docs/Web/CSS/object-fit

    https://www.html-seminar.de/cs…t-fit-object-position.htm


    Bei deinem Javascript schreibst Du leider nicht, wie Du das Seitenverhältnis aspectvalue berechnest. Normaler Weise muss man aber auf größer oder kleiner 1 abfragen.

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von Sempervivum ()

  • 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.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Codeschnipsler ()

  • 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.

  • 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.

    Sempervivum schrieb:


    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....

  • Zitat

    Ich hab Breite minus Höhe gerechnet

    Das erklärt natürlich alles, in dem Fall musst Du natürlich mit 0 vergleichen. Selber dividiere ich immer Breite durch Höhe.


    Zitat

    Die entstehenden bildgrössen sind aber immer unterschiedlich, wegen der verschiedenen Geräte

    Das ist dann wohl unvermeidlich, jedenfalls wenn man nicht will, dass das Bild verzerrt oder beschnitten wird.

    Funktioniert das object-fit denn jetzt bei dir?