下载鸥 > 网站下载 > 开发教程 > 小程序

微信小程序让图片高度自适应的方法

1 539 2021-06-14 10:00:02

收藏

本文目录

1. 图片高度自适应的方法
2. 附注：mode 的合法值

微信小程序让图片高度自适应的方法

html代码中，图片高度如果设置为auto，则在不被其他属性替代的情况下，图片高度会自适应。但到了微信小程序上，这一招就不行了。如果你设置为height:auto，会发现根本没用。这个时候，要怎样设置呢？

微信小程序让图片高度自适应的方法

微信小程序让图片高度自适应的方法

图片高度自适应的方法

1、样式设置宽度100%，

.img{
　　width: 100%;
}

2、给图片标签添加属性 mode="widthFix"

参考源码如下：

<image class="img" src="../static/images/product-1.jpg" mode="widthFix">

这样，我们就实现了微信小程序图片高度自适应。

附注：mode 的合法值

图片不仅可以高度自适应，也可以宽度自适应、上下展示全部等等，但具体做法与css有所不同，可查看下方合法值参数。

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

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

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

widthFix
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

top
裁剪模式，不缩放图片，只显示图片的顶部区域

bottom
裁剪模式，不缩放图片，只显示图片的底部区域

center
裁剪模式，不缩放图片，只显示图片的中间区域

left
裁剪模式，不缩放图片，只显示图片的左边区域

right
裁剪模式，不缩放图片，只显示图片的右边区域

top left
裁剪模式，不缩放图片，只显示图片的左上边区域

top right
裁剪模式，不缩放图片，只显示图片的右上边区域

bottom left
裁剪模式，不缩放图片，只显示图片的左下边区域

bottom right
裁剪模式，不缩放图片，只显示图片的右下边区域

本文地址：https://xzo.com.cn/develop/mini/1031.html

有帮助，很赞！

信息来源：下载鸥

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

微信小程序

一句话破解微信图片防盗链方法微信小程序富文本解析wxParse下载支持html标签百度小程序和微信小程序有什么异同 #ifdef H5是什么意思？微信小程序让图片高度自适应的方法微信小程序怎样保存登录状态？微信小程序发起ajax请求怎么做？开发微信小程序和uniapp有什么相同点和不同点？ JS判断当前页是否是微信浏览器打开代码与引导页微信小程序和html标签比较开发小程序比较常见的坑介绍一段判断是否微信和ie打开的js代码微信小程序不显示iconfont是什么原因帝国cms怎样开发微信小程序？微信小程序不允许wxss引入背景图片怎么办？微信小程序视频标签video不能全屏显示/有黑边怎么办？ php微信域名拦截检测API接口代码帝国cms怎样给自定义表单增加更多的字段微信微博等信息？微信自动播放视频插件微信小程序开发完毕后提交审核的流程

导出教程下载word版教程

关于小程序

小程序开发

小程序开发与常规的网站开发差别比较大，其语言虽然源自html、css、js基础，在实际应用上又有比较大的差别。小程序入门不像从一个cms到另一个cms，如果一定要做一个比较，那么从一门语言到另一门语言可能更加恰当。

小程序应用

小程序上线3年来，技术日臻成熟，可广泛应用于各行各业。

微信小程序让图片高度自适应的方法

微信小程序让图片高度自适应的方法

微信小程序不允许wxss引入背景图片怎么办？

微信小程序不允许wxss引入背景图片怎么办？

微信小程序怎样做加载中的动画并自动隐藏？

微信小程序怎样做加载中的动画并自动隐藏？

推荐小程序开发教程

帝国cms怎样开发微信小程序？ 目前市面上的帝国cms站点很多，而且因为帝国cms优质的性能与安全性，用户是越来...: 0 57

微信小程序轮播图高度怎样按照比例自适应 在常规的html网站，让轮播图高度自适应是很简单的。但到了微信小程序，轮播图高...: 0 440

帝国CMS有必要开发百度小程序吗？ 百度小程序的开放生态对网站站长及企业商家而言，能够从中获取到什么呢？百度智...: 1 57

微信小程序让图片高度自适应的方法 html代码中，图片高度如果设置为auto，则在不被其他属性替代的情况下，图片高度会...: 1 538

微信小程序怎样做加载中的动画并自动隐藏？ 微信小程序自带了加载中动画，免去了我们去开发的流程。那么，微信小程序的加载...: 0 492

推荐插件

帝国cms百度、必应bing、神马推送增强收录三合一插件 因客户需要一键推送到多平台，下载鸥开发了这款一键推送至百度、必应、神马插...: 0 159

帝国cms自动生成文章新闻目录插件下载 用户体验是我们的需求，百度蜘蛛的认可更是我们的需求。毕竟，没有收录排名，何来...: 0 1123

帝国cms多栏目多数据表自动审核推送插件 本插件基于帝国cms帝国cms每日自动审核插件，在自动审核指定条数信息的基础上...: 0 891

帝国cms网站会员登录与退出历史记录日志插件 帝国cms默认只有上次登录时间与ip，没有一个记录清单，所以今天，我们分享这个帝...: 0 357

帝国cms纳米数据接口（足球比赛中最新数据） 帝国cms 对接纳米数据（www.nami.com）接口，本接口主要接收、整理足球比赛实时数...: 0 319

帝国cms百度AI黑白图像上色api接口对接插件 百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...: 0 398

帝国cms自动给正文关键词添加tag内链 帝国cms有自带的给关键词添加内链功能，但需要手动添加关键词，容易出现疏漏和...: 0 811

帝国cms访问统计ip地址链接与封禁插件下载 下载鸥开发了这款帝国cms封禁ip插件，自动记录访问情况，让我们可以更快的识别...: 0 985

模板源码每日更新 14小时在线用户第一优质教程

下载鸥素材| 在线日志分析| 建站导航| 关于我们| 网站地图| 用户协议| 版权声明| 帮助中心

Copyright © 2021 下载鸥 xzo.com.cn 版权所有

客服QQ:341553759

扫码咨询常见问题 >

官方交流群:90432500

点击加入

下载鸥官方群加群

下载鸥美工兼职加群下载鸥UI设计加群

点击查看更多