微信小程序 - 设置图片高度自适应（宽度固定）

怼烎@ 2021-08-13 11:48 1291阅读 0赞

我们要放入多张一样宽度不一样高度的图片的时候，我们不能同时都设置固定的高度，这样会使得一些图片被挤压或者有些会出现空白的现象，这些都不能满足我们的需求，所以我来说一下如何实现图片高度自适应。
我们只需要在image标签上面加上 mode=“widthFix” 即可
wxml文件：

<view class='det-img'>
    <image mode="widthFix" src='../../images/detail/spins/50D-50DPearlChiffon/WechatIMG505.jpeg'></image>
</view>

在这里插入图片描述
css文件：

发表评论取消回复

表情：

评论列表（有 0 条评论，1291人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序rich-text富文本图片自适应宽度

一种方法：接口里给img标签加样式（PHP） $info['contents'] = str_replace("<img ", "<img style='max...

素颜马尾好姑娘i/ 2024年04月17日 15:09/ 0 赞/ 109 阅读

相关微信小程序 Image 图片实现宽度100%，高度自适应

做法如下：样式设置宽度100%， .img{ 　　width: 100%; } 添加属性 mode

你的名字/ 2023年06月20日 09:12/ 0 赞/ 74 阅读

相关微信小程序富文本里图片img宽度自适应

亲测好用，在util.js文件里写个公共方法，在需要的js页面调用。转自于：[https://www.jb51.net/article/154976.htm][https_

小鱼儿/ 2023年01月11日 09:09/ 0 赞/ 212 阅读

相关 android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应

为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待

柔光的暖阳◎/ 2022年10月16日 00:43/ 0 赞/ 578 阅读

相关小程序图片高度自适应

页面需要显示长图片（超过一屏），本来以为像以前一样给其父级的盒子不给高度就行了，结果并不是想象中的那样，根本不起作用！！！这是一个坑，关键在于image标签的一个属性：m

た入场券/ 2022年10月08日 11:22/ 0 赞/ 226 阅读

相关微信小程序-Image 图片实现宽度100%，高度自适应

IT实战联盟博客：http://blog.100boot.cn 大家好，今天在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然，如下图所示：

柔光的暖阳◎/ 2022年06月03日 22:40/ 0 赞/ 397 阅读

相关微信小程序图片实现宽度100%，高度自适应

图片设置宽度 .img\{ width:100%; \} 给image增加属性 mode="widthFix" <image class="img" src="/..

系统管理员/ 2022年03月11日 10:24/ 0 赞/ 472 阅读

相关小程序图片高度自适应

小程序图片高度自适应 image标签的一个属性：mode=“widthFix” <image src="{ {item.cover}}" class

曾经终败给现在/ 2022年01月10日 02:39/ 0 赞/ 408 阅读

相关微信小程序 image图片组件实现宽度固定高度自适应

添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthF

待我称王封你为后i/ 2021年09月17日 08:04/ 0 赞/ 564 阅读

相关微信小程序 - 设置图片高度自适应（宽度固定）

我们要放入多张一样宽度不一样高度的图片的时候，我们不能同时都设置固定的高度，这样会使得一些图片被挤压或者有些会出现空白的现象，这些都不能满足我们的需求，所以我来说一下如何实

怼烎@/ 2021年08月13日 11:48/ 0 赞/ 1292 阅读