html - 固定宽高比的 div，受视口(viewport)约束，居中，最大宽度和高度

Question

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

我想要一个具有以下要求的 div:

• 它始终保持给定的纵横比(例如 4:3)
• 它的宽度永远不会超过以像素为单位的给定固定最大值，例如800 像素
• 它的高度永远不会超过给定的固定最大值，例如600 像素
• 它的尺寸永远不会超过视口(viewport)的尺寸
• 在给定上述限制的情况下，它尽可能大
• 垂直和水平居中

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

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

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

Answer 1

我不认为 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/

祝你好运!