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

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

437 2021-06-14 10:00:02

收藏
微信小程序让图片高度自适应的方法
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

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于小程序

小程序开发

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

小程序应用

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

推荐小程序开发教程
帝国cms怎样开发微信小程序?
帝国cms怎样开发微信小程序?

目前市面上的帝国cms站点很多,而且因为帝国cms优质的性能与安全性,用户是越来...

0 57
微信小程序轮播图高度怎样按照比例自适应
微信小程序轮播图高度怎样按照比例自适应

在常规的html网站,让轮播图高度自适应是很简单的。但到了微信小程序,轮播图高...

0 352
帝国CMS有必要开发百度小程序吗?
帝国CMS有必要开发百度小程序吗?

百度小程序的开放生态对网站站长及企业商家而言,能够从中获取到什么呢?百度智...

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

html代码中,图片高度如果设置为auto,则在不被其他属性替代的情况下,图片高度会...

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

微信小程序自带了加载中动画,免去了我们去开发的流程。那么,微信小程序的加载...

0 384
推荐插件
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 305
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 259
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 350
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 870
帝国cms自动给正文关键词添加tag内链
帝国cms自动给正文关键词添加tag内链

帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...

0 634
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 393
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 323
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 439
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入