uni.app图片同比例缩放

超级小可爱

发布于 2023-02-20 11:35:03

1.6K0

发布于 2023-02-20 11:35:03

文章被收录于专栏：小孟开发笔记

图片同比例缩放是经常用到的，刚开始设置了什么max-width、object-fit都不行，最后才知道uni.app里自带的mode属性可以解决这个问题，真是方便了很多。

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取

aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

widthFix：宽度不变，高度自动变化，保持原图宽高比不变

<view class="orgimg">
   <image src="../../../static/timg%5B3%5D.jpg" mode="aspectFill" ></image>
  </view>
//css部分
<style lang="scss">
.orgimg {
 width: 500upx;
 height: 500upx;
}
</style>```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418162142414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTUxNDc0,size_16,color_FFFFFF,t_70)

未经允许不得转载：肥猫博客 » uni.app图片同比例缩放

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

app