Question

已经搜索了几天只有CSS的解决方案来维持div的宽高比。重要的一点是div高度应该是浏览器窗口的高度（没有滚动而没有隐藏溢出），宽度百分比应该调整以保持宽高比正确。到目前为止我发现的所有内容（主要是填充技巧）都使用父元素的宽度来维护方面，并在div下方添加了大量额外空间，尤其是在大屏幕上的全屏幕中。

真的想避免使用javascpript。

这是我的基本设置：

::编辑::添加了指向jsfiddle的链接 - http://jsfiddle.net/SUbYB/ ::编辑2 ::只使用jQuery来处理基于高度的div的设置宽度。谢谢大家！

样式表

body, html{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
}
.super-container{
    position: relative;
    width: 69.8%;
    height: 95%;
    max-width: 2008px;
    margin: 0 auto;
    padding: 0 15.1% 0 15.1%;
    background: rgba(200,200,200,.2);
}
.aspect-container{
    position: relative;
    display: block;
    height: 95%;
    margin: 0 auto;
    background: rgba(200,200,200,.4);
}
.aspect-critical-content{
    position: absolute;
    top:0; right: 0; bottom: 0; left: 0;
    background: rgba(200,0,0,.2);
}

和html

<html>
<head>
</head>

<body>

<div class="super-container">
     <div class="aspect-container">

         <div class="aspect-critical-content">
         </div>

     </div>
</div>

</body>
</html>

提前感谢您的帮助！

Answer 1

刚才使用的是什么：

display: table;
display: table-row;
display: table-cell;

在你的情况下（除了你的代码），这看起来像是：

.aspect-container{
    display: table-row;
}
.aspect-critical-content{
    display:table-cell;
    height:100%;
}

.aspect-container2{
    display:table-row;
    height:100px;
}

和html：

<div class="super-container">
  <div class="aspect-container">
    <div class="aspect-critical-content">
      some text
    </div>
  </div>
  <div class="aspect-container2">
    <div>
      text2
    </div>
  </div>
</div>

我添加的第二行只是为了展示如何轻松地在同一个容器中播放另一个块的高度。

The code on plunker.

Answer 2

你可以使用这种css技术：

.aspect-container {
  width: 100%;
  height: 0;
  margin: 0 auto;
  /* this is a aspect ratio of 1:3 */
  padding-top: 33.33%;
  position: relative;
}

.aspect-critical-content {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

padding-top到100的基数值是宽高比小提琴：http://jsfiddle.net/mE4qG/

使用CSS更改浏览器高度时调整div宽度

2 个答案: