欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」css 完美解决图片变形问题

作者 : 自学哈 本文共419个字,预计阅读时间需要2分钟 2022-09-28 共35人阅读
也想出现在这里? 联系我们

开发 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,即图片填充方式(这里不是图片大小)

自学哈网

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」css 完美解决图片变形问题
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号