首页 > 代码库 > 使用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让动态容器按固定宽高比显示