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

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

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

1.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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.8K20

    WebView显示图片适配屏幕宽度

    首先必须吐槽一下后台返回的Url网页HTML代码太坑: 情景一、WebView加载url 图片直接就是标签出来的,还是一张巨大的图片,直接导致webview加载只有截取了屏幕大小的宽度,看不到整张图片,...测试要求适配屏幕宽度。...于是有了这篇博客记录一下,在Webview的setWebViewClient()方法中WebViewClient中在加载完网页后执行一个JavaScript方法,这个JavaScript方法将所有网页中图片宽度设置为屏幕显示宽度...); } 情景二、WebView直接加载HTML代码 这里还记载一种以前遇到的情况,就是接口返回一段HTML方法,需要我们把这段HTML方法放在WebView中显示出来,也会有图片需要适配屏幕宽度的需求

    1.6K20

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    一、连续排列的链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度的 1/3 ; 2、标签结构设置 将布局中的 三个 链接图片.../ 右上 / 右下 /左下 */ border-radius: 10px 10px 0 0; } 4、设置浮动并精确计算宽度 在布局中 , 三个链接图片水平排列在一起 , 并且中间没有缝隙 ,...: 33.33%; } 5、设置图片宽度自适应 上述布局中 , 图片自动充满父容器 , 为 标签设置 100% 宽度 , 设置图片后 , 会按照宽高比等比例缩放 ; 设置样式为 : .brand.../ 设备宽度 的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度图片自动水平 / 垂直对齐 */...nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中 图片宽度是 30 像素 高度没有给出 但是 宽高等比例缩放 高度也是 30 像素 */

    3.5K20
    领券