方法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;
}
Last modification:August 12th, 2019 at 11:16 am
如果觉得我的文章对你有用,请随意赞赏