uniapp图片同比例缩放

最新推荐文章于 2025-03-25 09:47:23 发布

Daisy__1

最新推荐文章于 2025-03-25 09:47:23 发布

阅读量4.6k

点赞数 5

分类专栏： uniapp 文章标签：前端

原文链接：https://blog.youkuaiyun.com/qq_42551474/article/details/89381689

版权

uniapp 专栏收录该内容

1 篇文章

订阅专栏

uni.app图片同比例缩放

图片同比例缩放是经常用到的，刚开始设置了什么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://blog.youkuaiyun.com/qq_42551474/article/details/89381689
转载自：https://blog.youkuaiyun.com/qq_42551474/article/details/89381689