<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: rgb(201, 201, 238);
display: grid;
}
.inner {
background: rgb(231, 192, 225);
display: flex;
flex-direction: column;
align-items: center;
}
.square-wrapp {
aspect-ratio: 1;
flex: auto;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;
}
.square {
background: rgb(109, 83, 34);
aspect-ratio: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
<h2>正方形1</h2>
<div class="square-wrapp">
<div class="square"></div>
</div>
</div>
</div>
</body>
</html>
aspect-ratio绘制正方形
于 2024-05-14 14:03:36 首次发布