前言
在小程序中渲染图片时,对于大图会出现图片比例失调的问题,小程序的文档中有如下介绍
1、正常渲染图片
在开发者工具中调试
<!-- imagetest.wxml -->
<view class="con">
<view>未使用mode</view>
<view>
<image src="/public/img/big.jpg" />
</view>
<view>mode=widthFix</view>
<view>
<image mode="widthFix" src="/public/img/big.jpg" />
</view>
<view>mode=widthFix且style="width:100%;"</view>
<view>
<image mode="widthFix" src="/public/img/big.jpg" style="width:100%;"/>
</view>
</view>
/* imagetest.wxss */
.con{
padding: 20rpx;
box-sizing: border-box;
}
从截图中可以看出
- 第一张图片的宽高是
image
默认宽高 - 第二张图片添加了
mode
值为widthFix
,会自动计算默认宽度下,图片的高度 - 第三张图片添加了
mode
值为widthFix
,且限制了width
为100%
,即
2、使用 rich-text
渲染 html
字符串
在小程序中可以使用 rich-text
渲染 html
字符串,如果字符串中包含图片,请看如下案例:
- 图片添加样式
width:100%
还是max-width:100%
?
使用max-width:100%
- 图片是否添加
vertical-align:middle
若图片需要和文字居中,则需要添加 - 图片是否需要添加
height:auto
html
中img
标签的height
属性默认是auto
,故无需添加
<!-- imagetest.wxml -->
<view class="r_img">
<rich-text nodes="<p><img alt='' style='max-width:100%;height:auto;vertical-align:middle;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:max-width:100%;<br>height:auto;<br>vertical-align:middle;</p>"></rich-text>
</view>
<view class="r_img">
<rich-text nodes="<p><img alt='' style='width:100%;height:auto;vertical-align:middle;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:width:100%;<br>height:auto;<br>vertical-align:middle;</p>"></rich-text>
</view>
<view class="r_img">
<rich-text nodes="<p><img alt='' style='max-width:100%;height:auto;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:max-width:100%;<br>height:auto;</p>"></rich-text>
</view>
<view class="r_img">
<rich-text nodes="<p><img alt='' style='width:100%;height:auto;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:width:100%;<br>height:auto;</p>"></rich-text>
</view>
<view class="r_img">
<rich-text nodes="<p><img alt='' style='max-width:100%;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:max-width:100%;</p>"></rich-text>
</view>
<view class="r_img">
<rich-text nodes="<p><img alt='' style='width:100%;' src='/public/img/1.svg'>图片类型:svg图片</p><p>图片样式:width:100%;</p>"></rich-text>
</view>
/* imagetest.wxss */
.r_img{
border: 2rpx solid #ccc;
padding: 10rpx;
margin-bottom: 20rpx;
}