欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

H5图片高度根据宽度自适应

程序员文章站 2022-07-14 22:10:54
...

每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应。

下面看看实现代码:

下面是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;
}

 

推荐阅读