heinetz: object-fit

Hallo Forum,

ich stelle eine Grafik in einem Container dar, dessen Grösse (des Containers) variabel ist. Die Grafik soll den Container immer vollständig ausfüllen und vertikal sowie horizontal zentriert werden. Das funktioniert mit folgendem Konstrukt:

<div class="o-slider__image-col"> <img class="o-slider__image a-image" alt="Woman with painful expression holding her stomach" src="/dummy/images/humans/tummyache.png " sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw"> </div> .o-slider__image-col { position: relative; overflow: hidden; } .o-slider__image-col:before { content: ''; padding-top: 100%; display: block; } .o-slider__image { position: absolute; min-width: 100%; min-height: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

Nun meine (vielleicht ungewöhnliche) Frage:

Um Grafik flächenfüllend in einem Container darzustellen, gibt es die CSS-Property object-fit. Die hatte ich in einem meiner letzten Projekte mal eingesetzt, um diese Darstellung zu erreichen. Das war aber auf MS-Browsern problematisch und ich konnte keine Lösung finden, ausser die Grafik als Background-Image einzubinden.

Mit meiner Konstruktion scheint es nun aber doch zu gehen. Warum?

gruss, heinetz

  1. @@heinetz

    Mit meiner Konstruktion scheint es nun aber doch zu gehen.

    Nein. Das würde nur genauso aussehen, wenn das Bild kleiner ist als das div drumrum und wegen min-width/min-height hochskaliert wird.

    Andernfalls wird es in seiner intrinsischen Größe dargestellt und abgeschnitten.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. ... richtig. Danke.

  2. hallo

    <div class="o-slider__image-col"> <img class="o-slider__image a-image" alt="Woman with painful expression holding her stomach" src="/dummy/images/humans/tummyache.png " sizes="(min-width: 1440px) 720px, (min-width: 768px) 50vw, 100vw"> </div>

    PS:

    Woher kommt die Idee, sizes ohne srcset zu verwenden?

    -- https://beat-stoecklin.ch/pub/index.html