2

几天来一直在寻找仅使用 CSS 的解决方案来保持 div 的纵横比。重要的部分是 div 高度应与浏览器窗口高度相同（不滚动且不隐藏溢出），并且宽度百分比应调整以保持纵横比正确。到目前为止，我发现的所有东西（主要是填充技巧）都使用父元素的宽度来保持纵横比，并在 div 下方增加了很多额外的空间，尤其是在大型显示器的全屏显示中。

真的试图避免javascpript。

这是我的基本设置：

::Edit:: 添加到 jsfiddle 的链接 -- http://jsfiddle.net/SUbYB/ ::Edit 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>

提前感谢您的帮助！

4

2 回答 2

0

只是使用什么：

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>

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

plunker 上的代码。

于 2013-11-10T00:31:28.590 回答
0

您可以使用此 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/

于 2013-11-11T03:09:26.643 回答