前言

• 圖片容器寬度已確定
• 圖片加載后，將圖片容器按照圖片的寬高比設置高度

思路

• 圖片容器寬度已確定。
• uni-app的image組件，將mode設置為scaleToFill（不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素）。
• uni-app的image組件提供了@load事件。在@load事件中可以獲得圖片的寬、高。
• 獲得圖片的寬、高后，計算圖片容器的高度。
• 使用內聯樣式，為圖片容器設置圖片高度。圖片容器的寬高比與圖片的寬高比一致。

操作步驟

image組件設置：mode設置為scaleToFill；內聯樣式設置圖片高度

<div class="zbox" v-for="(item,index) in imageList" :key="index"><image :id="'img'+index" :src="item.url" mode="scaleToFill" class="cover_img" @load="imageLoad":style="{height: item.containerHeight + 'px'}"></image> </div>

s

<script>export default {components: {},data() {return {imageList: [], //圖片列表}},onLoad(options) {this.loadImageList();},methods: {/* 調用接口，從服務器獲取圖片列表 */loadImageList: function() {var _this = this;uni.request({...success: function(res) {_this.imageList = res.data;},...});},imageLoad: function(e) {var _this = this;/* 圖片容器的id */var id = e.currentTarget.id;/* 圖片容器對應數組數據的索引 */var index = id.substr(3);/* 圖片容器對應的數據 */var item = _this.imageList [index];/* 查詢圖片容器的寬度 */const query = uni.createSelectorQuery().in(this);query.select('#' + id).boundingClientRect(data => {/* 計算圖片容器的寬度 */item.containerHeight = data.width * e.detail.height / e.detail.width;/* 強制刷新。如不強制刷新，則圖片容器高度不會改變 */_this.$forceUpdate();}).exec();}}} </script>

總結

以上是生活随笔為你收集整理的【uni-app】动态计算图片高度且保持宽高比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。