Question

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

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

Answer 1

This link完美地描述了它。

您需要找到所需元素的宽高比。在你的情况下，它似乎是640乘200，这使你的宽高比有62.5％的百分比。（我只说这个，因为您使用的背景图片是640x200）

使用提供的链接中的代码，您只需要为容器添加宽度，向其添加:before的伪元素，并为:before padding-top 62.5% box-sizing:border-box; 1}}。然后你需要将容器放在绝对的内部。

所以你的容器需要一些东西。首先，只要有填充或边框处理，就使用relative，然后给它一个.container { width:100%; border:10px solid red; position:relative; box-sizing:border-box; }

的位置

:before

之后，您需要向其添加padding-top伪元素。这将采用它的容器的给定宽度（100％）并使用.container:before { content:""; display:block; padding-top:62.5%; }使高度成为宽度的比率：

absolute

之后，您只需确保内部的内容位于.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; }并且宽度和高度均为100％。

.content

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

我要做的一个建议是在容器内部创建一个名为.content { width:100%; height:100%; position:absolute; top:0; left:0; }的div，然后将这些样式添加到内容中：

{{1}}

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

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＆lt; ---

使用百分比作为单位设置元素的填充或边距直接指父元素宽度。 Read more...

CSS响应div，当高度设置为像素时

2 个答案: