Question

目标是为DIV及其所有孩子定义宽高比（f.E.4：3），其风格宽度为：100％，高度为100％。

只要我设置父

，这样就可以了

WIDTH:100%

然后添加到第一个孩子

PADDING-BOTTOM: 75%; // (3/4)*100

但是，如果我在1080p显示器上将窗口调整为全屏，则内盒将（可悲地）正确增长为宽度的100％和高度的75％。因此，1920像素宽的div将增长到1920x1440。在1080p屏幕上，这意味着我将有滚动条来查看div的完整内容。

我更喜欢内盒只有（window.innerHeight / 3）* 4宽，左边（和/或）右边有一个黑条。

所以我假设在父级上设置高度然后在子级上定义一个padding-right会产生相同的效果，但会给我屏幕右边的黑条而不是底部。

但如果设置父

，则不会有效

HEIGHT:100%

然后添加

PADDING-RIGHT: 33% // ((4/3)-1)*100

给孩子，因为填充基于包含元素的宽度。

现在在一个完美的世界里，我想让我的div，无论父母的高度和宽度是多少，正好是4：3，如果有必要的话，周围有黑色条纹，而不是任何维度都比父级更大，从而创建滚动条。

纯粹的CSS可以实现吗？或者我必须使用JavaScript吗？

修改：

与

<div style="width:133vmin;height:100vmin;margin-left:-66vmin;left:50%;background: #f00; overflow:hidden;">

我能够定义一个宽高比为4：3并且左右两边都有黑条的div，但是如果高度不够，它的大小不会增大。现在我需要以某种方式结合两种解决方案......

Answer 1

我写了一个解决方案，但遗憾的是它无法与最新稳定的Chrome一起使用，提交了一个错误：https://bugs.webkit.org/show_bug.cgi?id=94158

但它适用于Firefox 25.0和Chrome Canary 36.0.1922.0

<html>
<style>

body {
    margin:0;
    background: #000;
}

#block1 {
    display: inline-block;
    position: relative;
    width: 100vw;
    max-width: calc(100vh * 1.33333); // (4 / 3)
}
#block1:after {
    content: '';
    display: block;
    margin-top: 75%; // (3 / 4) * 100
}
#block2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

</style>
<body>
<div id="block1"><div id="block2"></div></div>
</body>
</html>

Answer 2

您的CSS应如下所示：

#block1{
    position: relative;
    width: 100%;        /* desired width */
}
#block1:before{
    content: "";
    display: block;
    padding-top: 75%;   /* initial ratio of 1:1*/
}
#block2{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

应该这样做。跨浏览器回到IE8。

来自这篇伟大的文章：http://www.mademyday.de/css-height-equals-width-with-pure-css.html

仅使用CSS维护基于宽度和高度的宽高比

2 个答案: