固定纵横比 div，受视口约束，居中，最大宽度和高度答案

【问题标题】：Fixed-aspect ratio div, constrained by the viewport, centered, up to max width and height固定纵横比 div，受视口约束，居中，最大宽度和高度
【发布时间】：2016-09-03 07:44:27
【问题描述】：

有没有办法在没有 JavaScript 的情况下仅在 CSS 中实现这一点？

我想要一个满足以下要求的 div：

它始终保持给定的纵横比（例如 4:3）
它的宽度永远不会超过以 px 为单位的给定固定最大值，例如800 像素
它的高度永远不会超过给定的固定最大值，例如600像素
它的尺寸永远不会超过视口的尺寸
考虑到上述限制，它可以达到最大程度
垂直和水平居中

换句话说，它应该填充视口的宽度或高度，以更受限制的为准，同时保持给定的纵横比；除非这超过了固定的最大宽度和/或高度，在这种情况下它将受到限制。

我不在乎需要多少个包装器。

我知道this answer 提供了由父级宽度约束的固定纵横比的解决方案，并且很容易添加一个带有附加包装器的固定最大宽度约束；但我似乎看不到一种方法来调整它以添加高度限制。

【问题讨论】：

附上预期结果的图纸可能会有所帮助
@Fez Vrasta 认真的吗？我认为要求列表非常清晰且完全不含糊。
我认为您可以根据答案的数量自行判断。如果你想要一个好的答案，你需要问一个好问题。
那么，如果一个问题特别难，或者如果实际答案是“你不能那样做”（这里可能就是这种情况），这是否意味着这是一个“不好”的问题？
真的，你可以随心所欲，我的只是一个建议。随意忽略它。

标签： html css

【解决方案1】：

我会推荐 css flex 属性。它使您能够将具有display: flex 属性的父元素的子元素居中。非常漂亮。您可以按如下方式实现水平/垂直居中。

这是另一个帖子，其中包含有关保持纵横比的说明： Maintain the aspect ratio of a div with CSS

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;  
    margin: 0;
    padding: 0;
}

.center {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    align-self: center;
    flex: 1 0 auto;
    height: 100%;  
    width: 100%;
}

.center > div {
    align-self: auto;
    background-color: #aaa;
}

.container {
    width: 100%;
    padding-bottom: 75%; /* achieves 4:3 aspect ratio */
    margin: 0 20px;
    background-color: yellow;
}

.centered {
    max-width: 800px;
    max-height: 600px;
    width: 100%;
    height: 100%;
}

<!-- ... -->
<div class='center'>

    <div class='container'>

        <!-- ensure your .centered div has 
        some specified height & width -->
        <div class='centered'>
            Your content
        </div>

    </div>

</div>
<!-- ... -->

JSBin Demo Here

【讨论】：

感谢您的帮助，但这仅解决了居中和固定纵横比问题。它不受父级高度的限制，只有宽度。它还会以某种方式在页面底部产生大量额外的空白空间，导致页面增长并出现垂直滚动条。并且右侧还有几个像素的额外空间，导致出现水平滚动条。我怀疑后者与 html, body {width: 100%; height: 100%}（body 和 html 有一些奇怪）
嗯，实际上它确实受到高度的限制（由于滚动条和/或正文边距导致的小错误的一部分）但是当它这样做时，它会失去纵横比。
您可以在body 和html 上执行overflow: hidden，这将防止额外的间距和滚动条。这会将容器的底部（最底部，在 75% 填充之后）带到视口的最底部，因为它知道它的父级不会扩展，因为它的父级溢出设置为隐藏。
确保将margin: 0; padding: 0;放在你的body和html标签上，这样你就不会在浏览器顶部获得额外的空间：]
当高度为约束时，仍然不保留纵横比。

【解决方案2】：

我不认为 max-height 是可行的，但我能够让其余的工作。 http://codepen.io/syren/pen/PNvorN

@mixin aspect-ratio($width, $height) {
    position: relative;
    max-width:400px;
    margin: 0 auto;
    display: block;

    &:before{
        display: block;
        content: " ";
        width: 100%;

        padding-top: ($height / $width) * 100%;
    }

    > .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.sixteen-nine {
  @include aspect-ratio(16,9);  
}

您也许可以做一些媒体查询魔术，改变纵横比在顶部和底部会被截断的设备上的工作方式。当您将高度设置为 0 时，您不能执行 max-height，但如果您将宽度设置为 0 并执行 padding-left 而不是 padding-top 或 bottom，并反转数学，这可能会起作用。你可以通过媒体查询来做到这一点。我现在会完全尝试一下，但我必须回去工作。

我还发现了一些其他资源，它们也可能会引导您到某个地方。

Maintaining aspect ratio with min/max height/width? https://dev.opera.com/articles/css3-object-fit-object-position/

祝你好运！

【讨论】：