清哥的小屋

本文同步自 CSDN · 清阿哥，原文发布于 2021-04-22。

开发 h5 的时候测试给提了一个 bug 图片变形，开发的时候还真没注意，确实变形了开起来怪怪的，然后就顺利找到了解决办法，废话不多说先呈上解决方法：

1
<div class="imgWrap">
2
    <img src="@/assets/images/copter.jpg" alt="">
3
</div>

1
 .imgWrap {
2
    width: 300px;
3
    height: 300px;
4
    border: 2px solid skyblue;
5
  }
6

7
  img {
8
    widows: 100%;
9
    height: 100%;
10
    object-fit: cover;
11
  }

搞定就这么简单！

效果图：

注意一点： 图片一定要设置宽高，否则设置object-fit无效！
解释：object-position相当于background-position，它的默认值是50% 50%，也就是居中，所以一般不写，加了object-fit，默认就居中了。而object-fit，相当于background-size，即图片填充方式（这里不是图片大小）

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

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