咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 710|回复: 0

[CSS] CSS实现宽度自适应宽高16:9的矩形的示例

[复制链接]
  • TA的每日心情
    无聊
    2019-5-27 08:20
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-12-18 17:41:23 | 显示全部楼层 |阅读模式
    前面我们讲了怎么做一个自适应宽高1:1的正方形
    https://www.jb51.net/css/753385.html
    现在我们来讲讲做自适应16:9的矩形要怎么做
    第一步先计算高度,假设宽100%,那么高为h=9/16=56.25%
    第二步利用之前所说设置padding-bottom方法实现矩形
    1. <style>
    2.                 *{
    3.                         margin: 0px;
    4.                         padding: 0px;
    5.                 }
    6.                 /* .wrap:包裹矩形的div,用来控制矩形的大小 */
    7.                 .wrap{
    8.                         width: 20%;
    9.                 }
    10.                 /* .box 矩形div,宽度是.wrap的百分百,这主要是为了方便高度的计算 */
    11.                 .box{
    12.                         width: 100%;
    13.                         /*防止矩形被里面的内容撑出多余的高度*/
    14.                         height: 0px;
    15.                         /* 16:9padding-bottom:56.25%,4:3padding-bottom:75% */
    16.                         padding-bottom: 56.25%;
    17.                         position: relative;
    18.                         background: pink;
    19.                 }
    20.                 /* 矩形里面的内容 ,要设置position:absolute,才能设置内容高度100%和矩形一样 */
    21.                 .box p{
    22.                         width: 100%;
    23.                         height: 100%;
    24.                         position: absolute;
    25.                         color: #666;
    26.                 }
    27.         </style>
    28.         <body>
    29.                 <div class="wrap">
    30.                         <div class="box">
    31.                                 <p>  这是一个16:9的矩形</p>
    32.                         </div>
    33.                 </div>
    34.         </body>
    复制代码
    CSS实现宽度自适应宽高16:9的矩形的示例-1.png

    类似不同的比例矩形,都可以用这种方法实现
    到此这篇关于CSS实现宽度自适应宽高16:9的矩形的示例的文章就介绍到这了,更多相关CSS 宽度自适应宽高内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/css/753849.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 03:33

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表