纯CSS实现等比例宽高

最新推荐文章于 2024-07-12 08:49:36 发布

每天进步一点.

最新推荐文章于 2024-07-12 08:49:36 发布

阅读量1.5k

点赞数

分类专栏： css 文章标签： css 宽高等比例

本文链接：https://blog.csdn.net/weixin_45152848/article/details/101376137

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考于一个很好的试验场： https://wow.techbrood.com/fiddle/15713

Key points
1.padding值（百分数）是基于宽度设定的，例如宽度是300px （padding-top: 50% 就是150px）
2.子元素伪类设置padding-top撑开元素，并设置定位定位到【0,0】原点
3.利用子元素padding-top控制宽高比

由于使用padding-top控制子元素高度
长/宽 = 2/1 padding-top的值为 100 / （2/1） => 50%
长/宽 = 788 / 433 padding-top的值为 100 / （788 / 433 ）=> 54.9492385786802%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background: orange;
            color: #222;
        }
        .box {
            display: inline-block;
            position: relative;
            width: 20%;
            margin: 5% 5% 0 0;
            float: left;
            font-size: 12px;
        }
        .box:before {
            content: "";
            display: block;
            padding-top: 100%;
        }
        .ratio2_1:before {
            padding-top: 50%;
        }
        .ratio1_2:before {
            padding-top: 200%;
        }
        .ratio4_3:before {
            padding-top: 75%;
        }
        .ratio16_9:before {
            padding-top: 56.25%;
        }
        .content {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: black;
            padding: 30px;
            text-align: center;
            vertical-align: center;
            text-transform: uppercase;
            color: #fff;
        }
        .content span {
            font-weight: bold;
            font-size: 3em;
            display: block;
        }
    </style>
</head>
<body>
    <div class="box ratio1_1">
        <div class="content">Aspect ratio of <span>1:1</span>
        </div>
    </div>
    <div class="box ratio2_1">
        <div class="content">Aspect ratio of <span>2:1</span>
        </div>
    </div>
    <div class="box ratio1_2">
        <div class="content">Aspect ratio of <span>1:2</span>
        </div>
    </div>
    <div class="box ratio4_3">
        <div class="content">Aspect ratio of <span>4:3</span>
        </div>
    </div>
    <div class="box ratio16_9">
        <div class="content">Aspect ratio of <span>16:9</span>
        </div>
    </div>
</body>
</html>

每天进步一点.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现等比例宽高

参考地址： https://wow.techbrood.com/fiddle/15713Key points1.padding值（百分数）是基于宽度设定的，例如宽度是300px （padding-top: 50% 就是150px）2.子元素伪类设置padding-top撑开元素，并设置定位定位到【0,0】原点3.利用子元素padding-top控制宽高比由于使用padding-top...
复制链接

扫一扫

专栏目录