css 完美解决图片变形问题

清阿哥、

于 2021-04-22 11:33:09 发布

阅读量3.2k

点赞数

分类专栏： H5 CSS 文章标签： html css3 html5

本文链接：https://blog.youkuaiyun.com/weixin_44980732/article/details/116006057

版权

CSS 同时被 2 个专栏收录

7 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了在H5开发中遇到的图片变形问题及其解决方案。通过设置CSS样式`object-fit: cover`并确保图片有固定宽高，可以避免图片变形。同时解释了`object-fit`和`object-position`的用法，帮助开发者更好地理解和应用这一技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

想了解 object-fit 自行去菜鸟上看吧 object-fit

有问题可以留言交流，希望能够帮到你！