zoukankan      html  css  js  c++  java
  • CSS实现宽度自适应宽高16:9的矩形

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/weixin_39357177/article/details/81186498
    前面我们讲了怎么做一个自适应宽高1:1的正方形

    https://blog.csdn.net/weixin_39357177/article/details/81183743

    现在我们来讲讲做自适应16:9的矩形要怎么做

    第一步先计算高度,假设宽100%,那么高为h=9/16=56.25%

    第二步利用之前所说设置padding-bottom方法实现矩形


    <style>
    *{
    margin: 0px;
    padding: 0px;
    }
    /* .wrap:包裹矩形的div,用来控制矩形的大小 */
    .wrap{
    20%;
    }
    /* .box 矩形div,宽度是.wrap的百分百,这主要是为了方便高度的计算 */
    .box{
    100%;
    /*防止矩形被里面的内容撑出多余的高度*/
    height: 0px;
    /* 16:9padding-bottom:65.25%,4:3padding-bottom:75% */
    padding-bottom: 65.25%;
    position: relative;
    background: pink;
    }
    /* 矩形里面的内容 ,要设置position:absolute,才能设置内容高度100%和矩形一样 */
    .box p{
    100%;
    height: 100%;
    position: absolute;
    color: #666;
    }
    </style>
    <body>
    <div class="wrap">
    <div class="box">
    <p>&nbsp;&nbsp;这是一个16:9的矩形</p>
    </div>
    </div>
    </body>


    类似不同的比例矩形,都可以用这种方法实现
    ————————————————
    版权声明:本文为CSDN博主「yazhiShaw」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_39357177/article/details/81186498

  • 相关阅读:
    PCL配置即常见问题
    opencv2.4.9配置+VS2013
    我的项目配置问题及解决
    Java 8 函数式编程
    leecode刷题(17)-- 实现StrStr
    leecode刷题(16)-- 字符串转换整数
    leecode刷题(15)-- 验证回文字符串
    博客迁移通知
    leecode刷题(14)-- 有效的字母异位词
    leecode刷题(13) -- 字符串中的第一个唯一字符
  • 原文地址:https://www.cnblogs.com/front-girl/p/11572575.html
Copyright © 2011-2022 走看看