微信小程序开发之 image 图片保持宽高比自动缩放高度

初始情况下,我们给 image 设置了宽度后,发现高度并不像 HTML 中一样自动缩放,好吧,我们试着设置 height:auto;,现在倒好,图片都看不到了。

难道微信小程序中不能保持图片的宽高比?

不是得。我们为 image 标签设置

注意:如何使用了这个模式,那么在 .wxss 中为图片设置的 height 将无效。

所以有时候我们也可以用这几种模式:

scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

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

mode 还有更多共 13 种模式,具体请参见:https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关键词: 微信小程序 图片真实大小 图片模式详解 这两天自己设计了两张微信广告横幅,电脑设计尺寸为750*300像...
    黄雨晴阅读 2,819评论 1 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,563评论 7 249
  • 一边维护旧有的舆情监测系统,一边思考着另外一个方向,一个小公司,要做线下的太难了,成本不说,要大量人手与时间去维护...
    Road阅读 449评论 0 1