仅在 CSS 中保持 div 的纵横比 [重复]答案

【问题标题】：Maintaining the aspect ratio of a div in CSS only [duplicate]仅在 CSS 中保持 div 的纵横比 [重复]
【发布时间】：2014-07-29 13:40:33
【问题描述】：

如果我有一个元素（例如 div#frame），我想尽可能多地填充屏幕，同时仍保持指定的纵横比（例如 16:9），我必须应用哪些样式？我确信 Javascript 中有一些不同的解决方案，但我想尝试一种仅使用 CSS 的方法。

我搜了一圈，虽然已经有some solutions in CSS了，但是他们使用的是百分比padding，是根据width的值来计算的，也就是说只有在浏览器水平调整大小时才会保持纵横比，并且没有垂直调整大小。

#frame
{
    /* centered */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    position: fixed; 

    /* aspect ratio */
    width: 100%;
    height: 0px;
    padding-bottom: 56.25%;
}

这很好用，但我想要一个解决方案，在水平和垂直调整大小时仍能保持元素的纵横比，如下图所示。

【问题讨论】：

标签： css aspect-ratio

【解决方案1】：

我认为不可能使用 css 属性来根据高度设置元素的宽度，因为它们本来就是要使用的。所以你最好开始在那里考虑 JS ;) 虽然有一个涉及图像的hack，但它不是很好。也许你可以扩展这个想法（我还是更喜欢 JS）。

您将需要一个具有您希望框架的最大尺寸的图像。一个透明的 gif 应该可以。然后让图像的本机行为设置包装器的大小，在包装器上使用inline-block。然后你在包装器中使用一个绝对定位的元素来保存你的内容：

<div class="wrapper">
    <img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg">
    <div class="content">
        content
    </div>  
</div>

CSS：

body {
    text-align: center;
}

.wrapper > img {
    display:block;
    max-width: 100%;
    max-height: 100%;
}
.wrapper {
    display: inline-block;
    position: relative;
    top: 50%;
}
.content {
    position: absolute;
    background: blue;
    left: 0;
    top: -50%;
    width:100%;
    height:100%;
}

【讨论】：