资讯专栏INFORMATION COLUMN

轻松实现固定比例的块级容器

cjie / 1733人阅读

摘要:给布局的时候一般都会碰到横幅比如要显示成比当然后端返回的图片是比就好了但事情往往不会那么如意所以怎么办呢写死宽高总觉得不妥当默认让自适应呢图片会慢慢撑开产品经理就会说这样用户体验不好我就是用户我就觉得挺好方法来了下面说明一下是个关键

给H5布局的时候一般都会碰到banner(横幅)
比如要显示成2比1 当然后端返回的图片是2比1就好了 但事情往往不会那么如意 所以怎么办呢 ?

写死宽高总觉得不妥当

默认width: 100%;让height自适应呢 图片会慢慢撑开(产品经理就会说这样用户体验不好 我TM就是用户 我就觉得挺好)

方法来了

        .banner-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%;
        }

        .banner {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        

下面说明一下

padding-top: 50%;是个关键 用百分比写padding是相对自身的宽的(别问我为什么 事实就是这样)
所以width: 100%; padding-top: 50%;就会完美呈现出一个2比1的盒子
最后把img整个的胡上去
完活 是不是觉得狠简单 用就完了 !

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54183.html

相关文章

  • 轻松实现固定比例块级容器

    摘要:给布局的时候一般都会碰到横幅比如要显示成比当然后端返回的图片是比就好了但事情往往不会那么如意所以怎么办呢写死宽高总觉得不妥当默认让自适应呢图片会慢慢撑开产品经理就会说这样用户体验不好我就是用户我就觉得挺好方法来了下面说明一下是个关键 给H5布局的时候一般都会碰到banner(横幅) 比如要显示成2比1 当然后端返回的图片是2比1就好了 但事情往往不会那么如意 所以怎么办呢 ? 写死宽...

    vvpale 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    Hydrogen 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    hlcc 评论0 收藏0
  • 如何居中一个元素(终结版)

    摘要:源代码演示利用将要水平排列的块状元素设为,然后在父级元素上设置,达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图,请猛戳Github个人博客 一、水平居中 1.行内元素水平居...

    Meils 评论0 收藏0
  • CSS规范 > 9 视觉格式化模型 Visual Formatting Model

    摘要:盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。 视觉格式化模型 Visual Formatting Model URL:http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻译,译者在原文基础上...

    魏宪会 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<