如何根据宽度和高度保持 Div 的长宽比？

根据宽度和高度保持纵横比

当努力在视口中定位居中的方形 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中文网其他相关文章！