需求：頁面上有一個div的寬度是隨着屏幕寬度的改變而改變的，但其寬高比始終是2:1，也就是當寬度是1000px時，高度為500px
分析：無論瀏覽器窗口如何改變，始終要讓目標元素的寬高比保持2:1，我們第一個想到的可能是使用js來實現，但是使用js來實現往往會比較耗費性能，那么今天我們就來講下使用css來完成這個需求。
實現：作為“碼農”我們還是直接上代碼來得直觀一點！
html:
<body>
<div class="container">
<div class="bracket"></div>
<div class="target"></div>
</div>
</body>
這里的.target為目標元素（讓其寬高2:1），.container為容器，而bracket為“支架”（實現需求的關鍵）
css：
<style type="text/css">
.container{
width: 40%;
position: relative;
/*出發BFC，否則內部元素撐不開container*/
overflow: hidden;
/*為了讓大家看清楚效果加的邊*/
border: 1px solid black;
}
/*支架，用於按2:1的寬高比撐開父級元素，如果是4:3，那么這里改成75%即可*/
.bracket{
margin-top: 50%;
}
.target{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: pink;
}
</style>
.container是我們的容器，因為寬度是百分比，所以它的寬度會隨着瀏覽器窗口的改變而改變，相應的.target也是如此。
而這里的.bracket設置了margin-top: 50%; 那么它的margin-top的實際值就是父級元素（.container）的寬度的一半，這里要注意，是父級元素的寬度，所以這里撐開的高度是寬度的一半，也就基本完成了寬高比2:1的需求。
最后，我們將.target填滿整個容器，也就是position:absolute;之后，上、下、左、右全部為0即可。
這里我再貼下完整的代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<style type="text/css">
.container{
width: 40%;
position: relative;
/*觸發BFC，否則內部元素撐不開container*/
overflow: hidden;
/*為了讓大家看清楚效果加的邊*/
border: 1px solid black;
}
/*支架，用於按2:1的寬高比撐開父級元素，如果是4:3，那么這里改成75%即可*/
.bracket{
margin-top: 50%;
}
.target{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="bracket"></div>
<div class="target"></div>
</div>
</body>
</html>
注：這個辦法也不是我想出來的，而是網上搜索找到的，正好我的項目中要使用且覺得很不錯就自己整理了一下，謝謝網上的大牛們！！！