CSS 适合视口内的 div，同时保持纵横比答案

【问题标题】：CSS fit a div inside viewport while keeping aspect ratioCSS 适合视口内的 div，同时保持纵横比
【发布时间】：2020-06-08 23:59:48
【问题描述】：

我想在页面中心放置一个 div（红色白色框）。黑色区域代表页面布局当无法拉伸宽度以保持纵横比时，div 需要高度为 100%，当高度无法拉伸时，div 需要为宽度 100%。我不确定我应该使用什么属性来计算

div不要溢出页面也很重要，所以不会显示滚动条

我试过了：设置height: 100%; width: auto;或者width: 100%; height: auto;都可以达到一半的目标但是我需要把它们结合在一起

*更新：我用@Paulie_D 的回答实现了 1:1 的纵横比，但是如果 div 需要是 16:9 或 4:3 怎么办？

【问题讨论】：

到目前为止你尝试了什么，出了什么问题？
@AntonyMN 我尝试了 height 100% width auto 和 height auto width 100%，但我不知道如何将它们组合在一起

标签： html css

【解决方案1】：

只需使用padding-bottom 的百分比值创建一个包装器 div wrapper，例如：

#wrapper {
    width: 100%;
    padding-bottom: 75%; /** For a 4:3 **/
}

这将导致wrapper 保持 4:3 的纵横比。这是因为：

填充百分比是相对于宽度计算的生成框的包含框

Source: w3.org

对于任何纵横比，除以aspect ratio height/aspect ratio width 得到padding-bottom 值

aspect ratio / padding-bottom
-----------------------------
16:9         / 56.25%
4:3          / 75%
3:2          / 66.66%
8:5          / 62.5%

Source: w3schools

【讨论】：

这仅适用于全宽但不适用于全高

【解决方案2】：

您可以使用vmin 管理此问题

Codepen Demo

vmin 等于 vw 和 vh 中的较小者。

MDN

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
}

div {
  width: 100vmin;
  height: 100vmin;
  background: white;
  margin: auto;
  border: 5px solid red;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

谢谢！但是这不会垂直居中 div，所以我做了一些修改：div { width:100vmin; height:100vmin; background: white; margin-left:auto; margin-right:auto; transform:translate(-50%, -50%); top:50%; left:50%; position:absolute; }
还有一点要问，如果 div 需要保持 4:3 或 16:9 的比例怎么办？