css 完美解决图片变形问题

本文共419个字,预计阅读时间需要2分钟 发布时间: 2023-05-21 共73人阅读

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

Hi模板网-致力于打造一个优秀的建站资源平台

本站声明:
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!

再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。


Hi模板网 » css 完美解决图片变形问题

常见问题FAQ

本站下载资源解压密码是什么?
本站所有资源解压密码均为www.hmoban.com或者hmoban.com
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
开通VIP 享更多特权,为了您的账户安全HI模板网建议您使用QQ登录!