首页 > 代码库 > 使用css让动态容器按固定宽高比显示
使用css让动态容器按固定宽高比显示
需求：页面上有一个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>
注：这个办法也不是我想出来的，而是网上搜索找到的，正好我的项目中要使用且觉得很不错就自己整理了一下，谢谢网上的大牛们！！！
使用css让动态容器按固定宽高比显示