純css實現高度與寬度固定比例
原理: padding的百分比計算是根據父元素的寬度來計算。
- 因此我們可以為子元素的
padding-bottom設定為50%，然後設定高度為0， 寬度設定為100%，這樣就我們就得到了一個高度為寬度的50%的div， 但是因為這個盒子的高度是0,如果我們在這個div裡直接寫內容， 就會出現各種問題(比如flex佈局不能用)， - 所以加了一個絕對定位的div， 設定
top: 0; bottom: 0; left: 0; right: 0;使這個div的高度和寬度是父元素的100%， 到此就獲得了一個高度為寬度一半的div,並且可以正常的佈局了。 - 改
padding-bottom的百分比, 就可以獲得想要的比例了。
<html>
<head>
<style>
.parent {
width: 800px;
}
.child {
height: 0;
padding-bottom: 50%;
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="content">
</div>
</div>
</div>
</body>
</html>
複製程式碼