我有一张比高度宽的横幅图片。我有一个显示不同大小图片的容器div,在横幅样式中,我需要它在两个方向上拉伸或压缩以填充父div。我查看了
一个工作示例在这里;代码如下:
object-fit:fill
,但它似乎只会水平地拉伸图像 - 它并不会使其垂直地填充div。一个工作示例在这里;代码如下:
.tile {
position: relative;
float: left;
margin: 10px;
border: 4px solid green;
height: 400px;
}
.deal {
width: 342px;
background: #ffffff;
}
.tileImage.promo {
object-fit: fill;
}
<div class="tile deal hsNational active">
<img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg" height="200px">
</div>
我哪里出了问题?(我已经尝试了各种 object-fit
的值,但没有一个能满足我的需求。)该图像应水平压缩并垂直拉伸以完全填充绿色边框内的区域。