Question

有没有办法在CSS中实现这一点，没有JavaScript？

我想要一个符合以下要求的div：

它始终保持给定的宽高比（例如4：3）
其宽度从未超过px中给定的固定最大值，例如800像素
其高度永远不会超过给定的固定最大值，例如600px的
其尺寸永远不会超过视口的尺寸
在给定上述约束的情况下，它可以获得的大小
它垂直和水平居中

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

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

我知道this answer提供了由父级宽度约束的固定宽高比的解决方案，并且很容易使用额外的包装器添加固定最大宽度约束;但我似乎无法看到一种方法来适应它来增加高度限制。

Answer 1

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

--driver com.mysql.jdbc.Driver

你可以做一些媒体查询魔术，你可以改变宽高比在顶部和底部被切断的设备上的工作方式。当您将高度设置为0时，您无法执行最大高度，但如果将宽度设置为0并执行padding-left而不是padding-top或bottom，并且将数学反转，则可能会有效。你可以通过媒体查询。我现在会完全尝试，但我必须重新开始工作。

我发现了一些可能会带你到某个地方的资源。

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

祝你好运！

Answer 2

我会推荐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

固定宽高比div，由视口约束，居中，最大宽度和高度

2 个答案: