vue之H5图片高度根据宽度自适应
原创vue之H5图片高度根据宽度自适应
原创
IT工作者
发布于 2022-05-16 19:22:29
发布于 2022-05-16 19:22:29
代码可运行
运行总次数：0
代码可运行
每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。
下面看看实现代码：
下面是uniapp的条件编译，如果是小程序场景就使用 mode 属性实现高度自适应，如果是H5场景，就通过图片 的 load 获取图片的宽高，然后通过计算出缩小后的宽高动态渲染到页面
<block v-for="(item,index) in awardsList" :key="index">
<!-- #ifdef MP -->
<image mode="widthFix" :id="index" :src='item.img' class="canvas-item-img"></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<image @load="dialImgLoad" :id="index" :src='item.img' :style="{width:item.img_width,height:item.img_height}">
</image>
<!-- #endif -->
<block>js代码：this.$forceUpdate() 是强制更新视图，因为页面加载的时候，图片设置宽高时是没有 img_width的。
80是需要设置的图片高度，图片的高度根据这个值等比缩小
methods: {
dialImgLoad(e){
let idx = e.currentTarget.id;
let num = e.detail.width/80;
this.awardsList[idx].img_width = 80+'rpx'
this.awardsList[idx].img_height = (e.detail.height/num).toFixed(2)+'rpx'
this.$forceUpdate()
}
}css代码：设置一个默认宽度，这里仅小程序会生效，H5会被 style 属性覆盖。
.canvas-item-img {
width: 80rpx;
}
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
