如何在保持宽高比的同时使 div 具有 100vh？

Question

我正在尝试制作一个长宽比为 1:1 的圆，使其具有 width: 100vh; height: 100vh; 属性，以便圆应该尽可能地增大，但不会失去其长宽比或溢出视口。它适用于宽度，但我想不出任何属性会迫使圆的高度保持 100vh;。

我尝试将 HTML 标签和 body 标签设置为 height: 100%。我尝试了 position: absolute 在 body 上并设置了 top、right、bottom 和 left 属性。似乎没有任何效果。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
}
.circle {
  padding-top: 100%; /* sets a 1:1 aspect ratio */
  border-radius: 100%;
  border: 1px solid red;
  width: 100%;
  max-height: 100vh !important;
  overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <main class="circle"></main>
</body>
</html>

Answer 1

100vmin 和 aspect-ratio 可以胜任

.circle {
  border-radius: 100%;
  border: 1px solid red;
  width: 100vmin;
  aspect-ratio: 1/1;
  box-sizing: border-box;
}

body {
  display:grid;
  place-content:center;
  min-height:100vh;
  margin: 0;
}

<main class="circle"></main>

如何在保持宽高比的同时使 div 具有 100vh？

How to make a div have 100vh while maintaining the aspect ratio?

css

overflow

aspect-ratio