微信小程序图片宽高自适应

1997yyds

于 2022-06-07 10:51:19 发布

阅读量7.8k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：一些问题文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_46293740/article/details/125160835

一些问题专栏收录该内容

3 篇文章

订阅专栏

微信小程序<image>有默认的宽高width:320rpx;height:240rpx;只设置width：100%是无效的，即使写了height：100%，依然无效

只要在<image>标签添加mode="widthFix"属性，就可以做到高度自适应，

wxml
<view  class="detail-x">
	<text>图文详情</text>
	<image src="/images/detail.png" mode="widthFix"></image>
</view>

wxss
.detail-x > image {
  width: 694rpx;
}

以下为效果图，宽度同理，设置高度后，将mode="heightFix"即可