使用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>

巴特西

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

最新文章

热门文章