当努力在视口中定位居中的方形 div 时，出现了问题：如何有效地保持其纵横比同时考虑宽度和高度尺寸？
2022 年 CSS 纵横比属性的出现为这一挑战提供了全面的解决方案。此属性使开发人员能够维持相对于视口大小或父元素的任何纵横比。
为了实现我们根据视口尺寸维持纵横比的目标，可以使用以下 CSS 代码：
<code class="css">.ar-1-1 {
aspect-ratio: 1 / 1;
background: orange;
}
.ar-1-19 {
aspect-ratio: 16 / 9;
background: pink;
}
div {
max-width: 100vw;
max-height: 100vh;
margin-bottom: 5vh;
}</code>此代码片段举例说明了两种宽高比：分别为 1:1 和 1:19。利用这些长宽比的 div 元素将自动调整其尺寸，以在视口内保持这些比例，从而确保视觉外观一致，无论视口大小或方向如何。
以上是如何根据宽度和高度保持 Div 的长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！
