前言

• 要求圖片加載后，保持寬高比（16：9）且充滿圖片區(qū)
• 使用uni-app的image組件，將mode設(shè)置為scaleToFill（不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素）

思路

• 頁面渲染完成后，獲取圖片的寬度
• 根據(jù)圖片的寬度，要保持16：9時的高度
• 使用內(nèi)聯(lián)樣式，為圖片設(shè)置圖片高度

操作步驟

獲取圖片的寬度，并計算圖片的高度

<script>export default{data() {return {imageHeight: 1,} },methods:{setImageHeight: function() {var _this = this;const query = uni.createSelectorQuery().in(this);query.select('.cover_img').boundingClientRect(data => {_this.imageHeight = data.width * 9 / 16;}).exec();}}}</script>

使用內(nèi)聯(lián)樣式，為圖片設(shè)置圖片高度

<image :src="coverURL" :mode="'scaleToFill'" class="cover_img" :style="{height:imageHeight + 'px'}"></image>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。