css 完美解决图片变形问题
开发 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,即图片填充方式(这里不是图片大小)

#免责声明#
ZHANN.CN帝国之家工作室内所有作品,均为ZHANN手写代码。部分样式或模板代码移植或仿造自互联网(如有侵权,出示著作权证书联系我删除),所有代码不能用于非法站点(色情,暴力,政治类站点)。ZHANN只提供源代码服务,不提供任何建站服务。不承担任何建站后的法律问题!ZHANN所得费用均为制作模板劳动报酬。使用开源免费的帝国CMS作为核心,请保留帝国CMS的版权。如商用请购买帝国商业版,ZHANN只做帝国CMS模板服务,不做任何建站、不制作采集任何网站内容、不出售任何非开源有版权源代码更不卖任何域名和空间服务器,我出卖的只是我的技术劳动力!如在本站发生交易任何资源或者下载任何资源,则代表默认同意以上文字内容。感谢小伙本的支持,做一个知法守法的好公民!