7

我怎样才能拥有一个高度为 100% 且具有特定纵横比（例如 2:3）的 div？

例如，如果外部元素的高度为 900px，则内部元素的宽度应为 600px，但这应该是响应式的。

我不想为此使用任何 JavaScript。

使用 CSS3 灵活的盒子模型就可以了。

4

2 回答 2

7

如果您的目标是支持 CSS3 的现代浏览器，您可以尝试以下方法。

考虑以下HTML片段：

<div class="wrapper">
    <div class="inner">Inner content...</div>
</div>

并应用以下CSS规则：

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.wrapper {
    background-color: lightblue;
    height: 100%;
}
.wrapper .inner {
    margin: 0 auto;
    background-color: beige;
    height: 100%;
    width: 66.6666666666vh;
}

该.wrapper元素占据了视口高度的 100%，因为我已经设置 height: 100%了bodyandhtml元素。

内部包装器.inner有一个height: 100%并填充父块。

要设置.inner宽度，请使用vh随父块高度缩放的视口百分比长度。

在此示例中，66.66vh表示垂直高度的 66.66%，对应于 2:3 的纵横比（宽度：高度）。

在jsFiddle上查看演示

参考：http ://www.w3.org/TR/css3-values/#viewport-relative-lengths


浏览器兼容性vh单位和其他垂直百分比长度对最新的浏览器有很好的支持，请参阅下面的参考了解更多详细信息。

请参阅参考：
https ://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility

使用间隔图像的替代方法

考虑以下 HTML：

<div class="ratio-wrapper">
    <img class="spacer" src="http://placehold.it/20x30">
    <div class="content">Some content...</div>
</div>

并应用以下 CSS：

.ratio-wrapper {
    position: relative;
    display: inline-block;
    border: 1px solid gray;
    height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
    height: 100%; /* set height: 100% for portrait style content */
    visibility: hidden;
    vertical-align: top;
}
.ratio-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
}

容器有.ratio-wrapper两个子元素 animg.spacer和div.content。图像为纵向纵横比，例如 20x30 (wxh)，并设置为展开以填充父容器的高度，使用height: 100%. 图像从视图中隐藏，但在父块中保留其空间。

元素被.content绝对定位以填充父容器并且可以包含任何内容。由于.content受到高度和宽度的限制，在某些情况下内容可能会溢出，因此设置overflow: auto可能是适当的。

参见演示：http: //jsfiddle.net/audetwebdesign/BVkuW/

相关问答：
在流体容器中，我可以让元素像宽一样高吗？

于 2013-09-15T00:59:09.077 回答
0

您可以通过将图像和内部作为兄弟姐妹粘贴2px到3px已应用div的外部来做到这一点。现在，当您将图像设置为 a of ，并且您将内部绝对定位为与其祖先一样高和宽时，您可以设置外部的 the ，并且所有涉及的元素的 the 将完全相等并基于方面图像的比例。divdisplay: inline-block;height100%divheightdivwidth

这是一个jsFiddle演示这种方法。

HTML

<div>
    <div>2 by 3</div>
    <img src=".../twobythree.png" />
</div>

CSS

body > div {
    height: 300px;
    position: relative;
    display: inline-block;
}
img {
    display: block;
    height: 100%;
}
div > div {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
于 2013-09-18T15:38:56.217 回答