uni.app图片同比例缩放
<p>uni.app图片同比例缩放<br>图片同比例缩放是经常用到的，刚开始设置了什么max-width、object-fit都不行，最后才知道uni.app里自带的mode属性可以解决这个问题，真是方便了很多。<br>aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取<br>aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。<br>widthFix：宽度不变，高度自动变化，保持原图宽高比不变</p><div class="cnblogs_code">
<pre><view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">orgimg</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<image src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">../../../static/timg%5B3%5D.jpg</span><span style="color: rgba(128, 0, 0, 1)">"</span> mode=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">aspectFill</span><span style="color: rgba(128, 0, 0, 1)">"</span> ></image>
</view>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">css部分</span>
<style lang=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">scss</span><span style="color: rgba(128, 0, 0, 1)">"</span>><span style="color: rgba(0, 0, 0, 1)">
.orgimg {
width: 500upx;
height: 500upx;
}
</span></style><span style="color: rgba(0, 0, 0, 1)">```
</span>![在这里插入图片描述](https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">img-blog.csdnimg.cn/20190418162142414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTUxNDc0,size_16,color_FFFFFF,t_70)</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/li-sir/p/12159654.html
頁:
[1]