小程序图片自适应宽高，保持图片比例不变

最新推荐文章于 2024-08-28 15:10:06 发布

半盏清茶°

最新推荐文章于 2024-08-28 15:10:06 发布

阅读量2.4k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_42846149/article/details/115299471

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在微信小程序中如何使用`<image>`标签的`mode`属性实现图片自适应容器并保持图片比例不变。通过设置`mode`为`aspectFit`，配合CSS样式，可以确保图片在200rpx x 200rpx的容器内居中显示且不被拉伸。示例代码展示了具体实现方法，使图片最大不超过150rpx宽高，保持原始比例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序图片自适应宽高，保持图片比例不变

小程序中，可根据需求给image设置 mode属性来控制图片的裁剪、缩放模式

如果要保持图片在容器内不变形可设置mode属性为aspectFit

代码如下：

//wxml
<view class="content">
    <image src="/images/1.png" class="img" mode="aspectFit"></image>
</view>
//wxss
.content{
	width:200rpx;
	height:200rpx;
	display:flex;
	justify-content: center;
  	align-items: center;
  	border:solid 1rpx #cecece;
}
.img{
	max-width: 150rpx;
    max-height: 150rpx;
}