在CSS中设置aspect ratio可以使用以下方法:
.aspect-ratio {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio */
background-color: #ccc;
}
.grid-container {
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr;
width: 100%;
height: 0;
padding-top: 50%; /* 2:1 aspect ratio */
background-color: #ccc;
}
.aspect-ratio {
position: relative;
width: 100%;
background-color: #ccc;
}
.aspect-ratio::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
这些方法可以帮助你在CSS中设置元素的aspect ratio,使你的布局更加灵活和美观。