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