方法1
在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比缩放。此时会用到 padding。
需要知道的是：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。
使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。
此时CSS代码如下：
div {
padding-bottom: 20%;
height: 0;
}
方法2
用vh单位
html
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ui-square-nerd"></div>
<div class="ui-square"></div>
</body>
</html>
css
.ui-square-nerd {
width: 20%;
height: 0;
padding-bottom: 20%;
background: blue;
}
.ui-square {
margin-top: 30px;
width: 20vh;
height: 20vh;
background: green;
}
网友评论