Question

如何使用具有特定宽高比的100％高度的div，例如2：3

？

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

我不想为此使用任何JavaScript。

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

Answer 1

如果您的目标是支持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%和body元素上的html。

内部包装器.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容器有两个子元素，img.spacer和div.content。图像为纵向纵横比，例如20x30（wxh），并设置为展开以使用height: 100%填充父容器的高度。图像在视图中隐藏，但在父块中保留其空间。

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

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

相关问答：
In Fluid Container, Can I Make Elements as Tall as they Are Wide?

Answer 2

您可以将2px 3px图像和内部div作为兄弟姐妹贴到已应用div的外部display: inline-block;中来执行此操作。现在，当您将图片设置为height 100%时，您绝对将内部div定位为与其祖先一样高且宽，您可以设置{{1}外部height的所有元素的div将完全相等，并且基于图像的宽高比。

这是一个 jsFiddle ，展示了这种方法。

<强> HTML

width

<强> CSS

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

Div具有100％的高度和特定的宽高比

2 个答案: