前言

• 要求图片加载后，保持宽高比（16：9）且充满图片区
• 使用uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）

思路

• 页面渲染完成后，获取图片的宽度
• 根据图片的宽度，要保持16：9时的高度
• 使用内联样式，为图片设置图片高度

操作步骤

获取图片的宽度，并计算图片的高度

<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>

使用内联样式，为图片设置图片高度

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

总结

以上是生活随笔为你收集整理的【uni-app】动态计算图片高度的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。