确保视口中的纵横比保留

在网页设计中，在适应可变视口尺寸的同时保持元素的纵横比至关重要。这确保了不同屏幕尺寸和方向的一致性。为了在处理方形元素时实现这种保留，可以实现以下 CSS 方法：

利用宽高比属性

从 2022 年开始，宽高比-ratio 属性为控制元素的纵横比提供了一个强大的解决方案。通过指定所需的宽高比，此属性会调整元素的大小以保持指定的比率。至关重要的是，尺寸自适应受到视口最小尺寸的限制，满足横向和纵向动态调整的要求。

示例实现

演示宽高比属性的功能，可以使用以下代码：

Aspect ratio 1:1
Aspect ratio 1:19

.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;
}

在此示例中，创建了两个具有不同宽高比（1:1 和 16:9）的 div。纵横比属性可确保无论设备的方向如何，这些 div 在视口中都保持其所需的形状和大小。此外，它们的尺寸被调整以适应视口的最小尺寸，确保保留正方形形状。