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

女爷i 2023-01-03 14:18 404阅读 0赞

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

下面看看实现代码：

下面是uniapp的条件编译，如果是小程序场景就使用 mode 属性实现高度自适应，如果是H5场景，就通过图片 的 load 获取图片的宽高，然后通过计算出缩小后的宽高动态渲染到页面

<block v-for="(item,index) in awardsList" :key="index">
    
        
        <image mode="widthFix" :id="index" :src='item.img' class="canvas-item-img"></image>
        
    
        						
        <image @load="dialImgLoad" :id="index" :src='item.img' :style="{width:item.img_width,height:item.img_height}">                    
        </image>
        
    
    <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;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，404人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现根据元素自适应宽度设定高度

需求描述： wap页面展现一张banner图片，要求其宽度为页面的宽度（屏幕宽度），高度为宽度的3/5。 css实现： js实现方式很简单，就不做介绍了；这里我们说下

桃扇骨/ 2023年02月22日 08:14/ 0 赞/ 31 阅读

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

每个图片原始宽高不一样，缩小每个图片到指定的宽度，高度等比例缩小，实现图片高度自适应。下面看看实现代码：下面是uniapp的条件编译，如果是小程序场景就使用 mode

女爷i/ 2023年01月03日 14:18/ 0 赞/ 405 阅读

相关 android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应

为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待

柔光的暖阳◎/ 2022年10月16日 00:43/ 0 赞/ 523 阅读

相关【vue系列】高度宽度不等的图片列表自适应

效果图 ![在这里插入图片描述][171794d764c1b6205a5651aae24d66d4.png] ![在这里插入图片描述][a9c46401ef97ea8e

傷城~/ 2022年08月30日 11:59/ 0 赞/ 243 阅读

相关背景图片根据宽度自适应高度的方案

移动前端自适应开发过程中，使用背景图片替换img标签时，img标签可以根据屏幕宽度自适应高度，而背景图片却无法适应高度，使用css的内边距（padding）可以解决高度问题，因

红太狼/ 2022年08月23日 03:52/ 0 赞/ 272 阅读

相关 iframe的宽度和高度自适应

$(function(){ $("调整的iframe").attr("width",(document.body.offsetWidth - 100)

柔光的暖阳◎/ 2022年06月18日 08:10/ 0 赞/ 277 阅读

相关 textarea 自适应宽度和高度

场景分析解决场景经常与遇到处理文字域的问题, 需要继承父级的宽度分析 `te

「爱情、让人受尽委屈。」/ 2022年05月18日 08:20/ 0 赞/ 455 阅读

相关 div或img图片高度随宽度自适应（实用）

原文出处：[https://blog.csdn.net/zh\_rey/article/details/69666232][https_blog.csdn.net_zh_rey

缺乏、安全感/ 2022年05月11日 04:50/ 0 赞/ 346 阅读

相关 textarea 自适应宽度和高度

css样式： .textarea-inherit { width: 100%; overflow: auto; wor

悠悠/ 2021年11月22日 13:08/ 2 赞/ 522 阅读

相关 jquery根据图片宽度同比例设置图片高度,图片自适应高度

用jq根据图片的宽度同比例设置图片高度,有时图片宽度好控制,但高度一般都是auto,如果为了自适应,不方便直接设置图片的高度heght,可以用下载的方法

深藏阁楼爱情的钟/ 2021年09月26日 01:20/ 0 赞/ 554 阅读