CSS-宽高自适应

CSS中宽高自适应可以通过多种方式实现，以下是几种常用的方法：

1. 使用百分比（%）定义宽度和高度，元素的宽度将相对于父元素的宽度，高度相对于元素内容：

.box {
  width: 50%; /* 宽度是父元素宽度的50% */
  height: 20%; /* 高度是父元素高度的20% */
}

2. 使用vw和vh单位，这些单位分别代表视口的宽度和高度的百分比：

.box {
  width: 50vw; /* 宽度是视口宽度的50% */
  height: 50vh; /* 高度是视口高度的50% */
}

3. 使用flexbox布局自适应调整子元素的大小：

.container {
  display: flex;
}
 
.box {
  flex: 1; /* 子元素会平均分配父容器的空间 */
}

4. 使用max-width和max-height属性，可以确保元素的大小不会超过指定的最大值：

.box {
  width: 100%; /* 宽度为父元素的100% */
  max-width: 1000px; /* 但不会超过1000px */
  height: auto; /* 高度根据内容自适应 */
}

5. 使用object-fit属性让图片等内容自适应大小：

.image {
  width: 100%; /* 图片宽度为父元素的100% */
  height: 200px; /* 图片高度固定为200px */
  object-fit: cover; /* 图片将覆盖整个设定的空间，保持宽高比 */
}

以上是几种常见的CSS宽高自适应的方法，具体使用哪种取决于你的布局需求和设计规范。