我正在嘗試制作一個縱橫比為 1:1width: 100vh; height: 100vh;的圓以具有屬性，因此圓應該盡可能地增長，但不會失去縱橫比或溢位視口。它適用于寬度，但我無法弄清楚任何會強制圓的高度保持不變的屬性100vh;。
我試圖將 HTML 標記設定height: 100%為以及 body 標記。我在身體上嘗試了 position: absolute 并設定了頂部、右側、底部和左側的屬性。似乎沒有任何效果。
* {
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>uj5u.com熱心網友回復：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377814.html