我有几个列,我使用flex给出相等的宽度.每个都包含img标签,我希望这些图像能够展示object-fit: cover尺寸.
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.test {
flex: 1;
margin-right: 1rem;
overflow: hidden;
height: 400px;
}
img {
object-fit: cover;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
图像没有调整大小,如本演示中所示.这是为什么?