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

Question

微信小程序 image

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

html 结构

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

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

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

Answer 1

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

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

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

具体可以参考文档

MDN object-fit