uni.app圖片同比例縮放


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://img-blog.csdnimg.cn/20190418162142414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTUxNDc0,size_16,color_FFFFFF,t_70)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM