object-fit

[heinetz]

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

[Gunnar Bittersmann]

@@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 🖖

[heinetz]

... richtig. Danke.

[beatovich]

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?