是否可以在单行图像中将图像裁剪为最短高度?如果可以,这是否可以仅通过CSS完成?
以下是我想要实现的示例:
以下是我目前正在努力的代码:
.container {
width: 100%;
margin: 0 auto;
}
.row {
width: 100%;
background: black;
display: flex;
align-items: center;
overflow: auto;
}
.row .item {
width: 33.33333%;
}
.row img {
display: block;
object-fit: cover;
width: 100%;
}
<div class="container">
<div class="row">
<div class="item">
<img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco3_r1_1280.jpg" />
</div>
<div class="item">
<img src="https://78.media.tumblr.com/c49ef0b40483c35ad3b6898c0e037e11/tumblr_oyslstg5xk1unhdoco2_r1_1280.jpg" />
</div>
<div class="item">
<img src="https://78.media.tumblr.com/737456a69c07da1a9a2784506f62dce9/tumblr_oyslstg5xk1unhdoco9_r1_1280.jpg" />
</div>
</div>
</div>