首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应。...下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H5场景,就通过图片 的 load 获取图片的宽高,然后通过计算出缩小后的宽高动态渲染到页面...-- #endif --> js代码:this.$forceUpdate() 是强制更新视图,因为页面加载的时候,图片设置宽高时是没有 img_width的。...80是需要设置的图片高度,图片的高度根据这个值等比缩小 methods: { dialImgLoad(e){ let idx = e.currentTarget.id;...$forceUpdate() } } css代码:设置一个默认宽度,这里仅小程序会生效,H5会被 style 属性覆盖。

2.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

移动端两端对齐 + 图片宽度自适应

自适应四宫格 有这样一张设计稿,左右两边白色间距为4px,中间间距为10px,每一行的两张图是等宽的(即平分去掉间距后的宽度) 有一种方法是和设计师商量,把所有的具体尺寸改为百分比尺寸。。...这个布局不太好写的主要原因是,在宽度上,百分比(50%)与实际尺寸(4px 10px)混杂,所以做到宽度自适应的话会有困难。...下面是正经的一种写法: 图片单元float,宽度设置为50%,奇数单元设置margin-right为10px, 偶数单元设置margin-right为-10px。...父元素设置左padding为4px,右padding为14px,父元素的padding值正好是所有间距的总和,所以它实际宽度的50%是正好符合需求的图片单元宽度。...absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; } } 自适应六宫格

1.4K40

自适应宽度元素单行文本省略用法探究

在响应式开发中,自适应宽度元素单行文本省略容易失效不起作用,对网页开发这造成困扰。因此,本文将要要探究自适应宽度元素单行文本省略用法。...2)display为flex元素的子元素flex-item如果是自适应宽度时,flex-item内的子元素实现单行文本省略,需要给flex-item添加overflow:hidden样式 display...为flex元素的子元素flex-item如果是自适应宽度时,flex-item内的子元素单行文本省略样式不起作用,例如: body,h2,p,span,img{ margin:0... 在这个flex布局的实例中,元素right的宽度自适应的,元素right内的h2和p元素单行文本省略样式都不起作用。...为table元素)内单行文本省略,需要给table元素(或display为table元素)添加table-layout:fixed样式 4)display为flex元素的子元素flex-item如果是自适应宽度

2.3K30
领券