CSS 响应式 div，当以像素为单位设置高度时

Question

我有一个容器 div，它的高度以像素为单位设置 -- 例如:height:500px。此 div 包含的任何内容都使用 % 响应并保持完美的纵横比。但是当然，当我调整浏览器窗口的大小使其变小时，唯一保持相同高度的 div 是容器 div。我怎样才能使它具有响应性——当它以给定的像素标准高度开始时更改容器 div 的高度？非常感谢您提供的任何解决方案。

我在这里做了一个简单的例子:http://jsfiddle.net/5j9jddbk/

Answer 1

This link完美地描述了它。

您需要找到所需元素的纵横比。在您的情况下，它似乎是 640 x 200，这使得您的纵横比的百分比为 62.5%。 (我之所以这么说，是因为您使用的背景图片是 640x200)

使用提供的链接中的代码，您只需要给您的容器一个宽度，添加一个伪元素 :before 并给 :before 一个padding-top 的 62.5%。然后你需要将你的容器绝对定位在它里面。

所以你的容器需要一些东西。首先，使用 box-sizing:border-box; 每当你有 padding 或 borders 需要处理时，然后给它一个 relative

的位置

.container {
    width:100%;
    border:10px solid red;
    position:relative;
    box-sizing:border-box;
}

之后，你需要给它添加一个:before伪元素。这将采用其容器的给定宽度(即 100%)并使用 padding-top 使高度与宽度成比例:

.container:before {
    content:"";
    display:block;
    padding-top:62.5%;
}

之后，您只需确保您的内容位于 absolute 位置并且宽度和高度为 100%。

.inner
{
    width:100%; height:100%;
    background:url('http://p1.pichost.me/640/1/1236135.jpg') no-repeat;
    -webkit-background-size:100%;
       -moz-background-size:100%;
         -o-background-size:100%;
            background-size:100%;
    text-align:center;
    font-size:40px; color:#fff;
    position:absolute;
    top:0;
    left:0;
}

这是 fiddle 演示 http://jsfiddle.net/bcbvLLrc/

我的一个建议是在容器中创建另一个名为 .content 的 div，然后将这些样式赋予内容:

.content {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

这将确保内容是容器的完整大小，然后您可以根据需要在内容中设置任何样式，例如，您可以在内容中放置额外的列或行，而不必担心任何内容溢出任何地方。