html - CSS 适合视口(viewport)内的 div，同时保持纵横比

Question

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

同样重要的是，div 不会溢出页面，这样就不会显示滚动条

我尝试过:设置高度:100%；宽度:自动； 或宽度:100%； height: auto; 两者都可以达到目标的一半，但我需要将它们结合在一起

*更新: 我已经通过 @Paulie_D 的答案实现了 1:1 的宽高比，但是如果 div 需要为 16:9 或 4:3 该怎么办？

Answer 1

您可以使用vmin来管理它

Codepen Demo

vmin Equal to the smaller of vw and 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;
}

<div></div>