用 css 实现 微信小程序 image 组件的 mode = aspectFill 让图片按比例响应式缩放、并自动裁剪的css

夕君
  • 1.4k

图片描述

微信小程序 image

保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

html 结构

<div class="pic-box">
    <img :src="item.picture" />
</div>

由于图片 的长短不一, 比例不固定。

这里有一篇 用背景图实现的 实列

回复
阅读 10.2k
1 个回答

css 本身是有一个比较小众的属性 object-fit,

只需要给img标签设置object-fit: cover就Ok了,和background-size:cover;的效果一样,

如果在手机上的话,可以放心使用,如果在pc上使用的话,需要考虑一下兼容性,它不兼容IE

具体可以参考文档

MDN object-fit

宣传栏