在视口中心最大化 div 但保持宽高比

Question

这就是我要找的：

<div> 会根据视口大小调整大小，但始终保持其纵横比。

这是我的进展：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: red;
}
div#content {
  margin: auto;
  width: 100vmin;
  height: 100vmin;
  background-color: blue;
}
</style>
<body>
<div id="content"></div>
</body>
</html>

<div> 居中并最大化，但始终具有 1:1 纵横比。比如我想要2:1怎么办？

Answer 1

我想我设法通过组合 max-width 和 max-height 来解决它。

下面是 2:1 纵横比的示例。首先，我们希望 width: 100vw 填充整个宽度（由于 2:1）height 的一半，所以 height: 50vw。但是，如果视口宽度变宽而视口高度减小，则在某些时候 50vw 会大于视口高度。 max-height: 100vh 涵盖了这一点。所以高度永远不会大于视口高度。同样适用于宽度：max-width: 200vh 将宽度限制为最大高度的两倍（由于 2:1），即 100vh.

对于4:3纵横比，就是3/4=0.75height: 75vw和4/3=1.33max-width: 133vh等等。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: red;
}
div#content {
  margin: 0;
  width: 100vw;
  max-width: 200vh;
  height: 50vw;
  max-height: 100vh;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: blue;
}
</style>
<body>
<div id="content"></div>
</body>
</html>

在视口中心最大化 div 但保持宽高比

Maximize div in center of viewport but keep aspect ratio

html

css

layout

viewport

centering