使用CSS让元素尺寸缩小时保持宽高比例一致

CSS中有一个属性 padding对元素宽度存在依存关系。如果一个元素的 padding属性以百分比形式表示，padding 的大小是以该元素包含块宽度为参照的（包含块传送门）。

若想要元素尺寸变化时，宽高比例不变，可以将height 设为0，padding 撑开盒子高度，达到宽高比例不变的效果。

代码如下：

<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
html,body{
    background: #0a265e;
    height: 100%;
}
.box{
    width: 80%;
    height: 500px;
    background: red;
}
.children{
    width: 80%;
    height: 0;
    padding-bottom: 30%;
    background-color: #008b57;
}
</style>    
</head>
<body>
<div class="box">
    <div class="children"></div>
</div>
</body>
</html>

 

posted @ 2018-08-29 17:08  沐子馨  阅读(2674)  评论(0)  编辑  收藏  举报