Warum funktioniert die Objektanpassung in der Flexbox nicht?
Ich habe mehrere Spalten, die ich mit flex gleich breit mache. Jedes enthältimg
Tags, und ich möchte, dass diese Bilder das @ aufweisobject-fit: cover
Größe.
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.test {
flex: 1;
margin-right: 1rem;
overflow: hidden;
height: 400px;
}
img {
object-fit: cover;
}
<div class="container">
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>
Die Größe der Bilder wird nicht geändert, wie in @ zu sehen isdiese Demo. Warum das