定宽高比的css实现方法：flex + 伪类 + padding

最新推荐文章于 2023-07-20 18:00:07 发布

weixin_30650859

最新推荐文章于 2023-07-20 18:00:07 发布

阅读量339

点赞数

原文链接：http://www.cnblogs.com/chaoyueqi/p/11364690.html

版权

css定宽高比，很久没做过这个需求了，记得之前都是直接用js来处理的，本例运用flex + 伪类 + padding的css的实现方法，涉及到三个点。

1：上下padding的值，相对于最近父级的宽
2：flex布局，未设置高的具体值的时候，其值等于子级内容最大的高度
3: 伪类，content为空，宽高为0，不占据位置，也不产生多余的标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css定宽高比 flex + 伪类 + padding</title>
    <style>
        .wrapper {
            width: 200px;
            background-color: pink;
            display: flex;
        }
        .wrapper:after {
            content: '';
            padding-top: 100%;
        }
    </style>
</head>
<body>
    <div class="wrapper">内容</div>
</body>
</html>

参考链接：你未必知道的49个CSS知识点

转载于:https://www.cnblogs.com/chaoyueqi/p/11364690.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30650859

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定宽高比的css实现方法：flex + 伪类 + padding

css定宽高比，很久没做过这个需求了，记得之前都是直接用js来处理的，本例运用flex + 伪类 + padding的css的实现方法，涉及到三个点。1：上下padding的值，相对于最近父级的宽2：flex布局，未设置高的具体值的时候，其值等于子级内容最大的高度3: 伪类，content为空，宽高为0，不占据位置，也不产生多余的标签<!DOCTYPE html&gt...
复制链接

扫一扫