首页 > 文章资讯 > 技术教程 > 帝国cms教程 > 帝国cms页面css 完美解决图片变形问题

帝国cms页面css 完美解决图片变形问题

时间：2024年04月23日

来源：网络

编辑：佚名

开发 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，即图片填充方式（这里不是图片大小）

新闻资讯更多

猜你需要