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

夕君
  • 1.4k

图片描述

微信小程序 image

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

html 结构

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

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

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

回复
阅读 10.5k
1 个回答
澹台宇鹏
  • 1.6k

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

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

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

具体可以参考文档

MDN object-fit

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏