开发 h5 的时候测试给提了一个 bug 图片变形,开发的时候还真没注意,确实变形了开起来怪怪的,然后就顺利找到了解决办法,废话不多说先呈上解决方法:
<div class="imgWrap">
<img src="@/assets/images/copter.jpg" alt="">
</div>
.imgWrap {
width: 300px;
height: 300px;
border: 2px solid skyblue;
}
img {
widows: 100%;
height: 100%;
object-fit: cover;
}
搞定就这么简单!
注意一点: 图片一定要设置宽高,否则设置object-fit无效!
解释:object-position相当于background-position,它的默认值是50% 50%,也就是居中,所以一般不写,加了object-fit,默认就居中了。而object-fit,相当于background-size,即图片填充方式(这里不是图片大小)
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:[email protected],我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。