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;，然后给它一个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;
}

这是小提琴演示 http://jsfiddle.net/bcbvLLrc/

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

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

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

Answer 2

这是一种解决方案，您可以根据父元素的宽度设置高度：

<div class="wrapper">
    <div class="container">
        <div class="inner">resize me..
            <br>..make me smaller</div>
    </div>
</div>

和 CSS：

.wrapper {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.container {
    padding-bottom:51%;
    position: relative;
    border:10px solid red;
    box-sizing: border-box;
    /* Because of border */
    background:url('http://p1.pichost.me/640/1/1236135.jpg') no-repeat;
    background-size:100%;
    text-align:center;
    font-size:40px;
    color:#fff;
}
.inner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

Fiddle

以百分比为单位设置元素的内边距或外边距直接指父元素的宽度。 Read more...