如何设置css 可以让盒子的宽高比保持不变

要让一个CSS盒子的宽高比保持不变，你可以使用相对单位或者一些CSS特性来实现。这里有几个方法：

1. **`width` 和 `height` 使用百分比**:
如果宽度和高度都是相对于某个容器（如父元素的宽度或视口），可以分别设置它们为百分比值。例如：

   .box {
     width: 50%; /* 或其他百分比 */
     height: 100%; /* 这样宽高比就是1:1 */
     aspect-ratio: 1 / 1; /* 可选，为浏览器提供兼容性 */
   }

2. **Flexbox 或 Grid 容器**:
使用 Flexbox 或 CSS Grid 可以控制项目间的比例。例如，在Flexbox中：

   .parent {
     display: flex;
     flex-wrap: nowrap;
   }
   .child {
     flex-basis: calc(50% - 10px); /* 控制宽度并保持宽高比 */
     padding-bottom: 50%;
   }

在 Grid 中：

   .grid-container {
     display: grid;
     grid-template-columns: repeat(1, minmax(auto-fit, 1fr));
     grid-template-rows: repeat(1, minmax(auto-fit, 1fr));
   }

3. **CSS calc() 函数**:
直接计算宽度以保持高度比例。假设你想让宽度为宽度的一半：

   .box {
     width: calc(50% - 10px);
     height: 100%;
   }

4. **`object-fit: cover`** (适用于 `<img>` 标签):
对于图片等内容区域需要填充背景的元素，可以用此属性：

   img {
     width: 100%;
     height: auto;
     object-fit: cover;
   }

记得每个方法都有其适用场景和兼容性考虑，根据实际需求选择最适合的方案。