CSS设置轮播容器宽度90%并自动适配高度的问题

问题原因 #

原代码中.slide使用绝对定位，脱离了文档流，导致.carousel没有内容支撑高度——当设置height:auto时容器高度为0，自然看不到内容；固定高度时，图片height:auto无法按比例适配容器，出现缩放问题。

修改方案 #

方案一：使用aspect-ratio属性（现代浏览器推荐）

直接通过宽高比让容器高度自动适配宽度，修改CSS如下：

.carousel {
  position: relative;
  width: 90%;
  max-width: 1200px; /* 可选，限制最大宽度防止过宽 */
  margin: auto;
  aspect-ratio: 1200 / 496; /* 匹配原图片的宽高比 */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 让图片填满容器 */
  object-fit: cover; /* 保持图片比例，裁剪超出部分；如需完整显示用contain */
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.slide.active {
  opacity: 1;
}

• aspect-ratio会根据宽度自动计算高度，完美适配90%的宽度设置
• object-fit: cover保证图片按比例填充容器，不会变形；若希望完整显示图片，替换为object-fit: contain（容器可能出现留白）

方案二：兼容旧浏览器的padding-top技巧

如果需要支持不兼容aspect-ratio的旧浏览器，用padding百分比实现比例容器：

.carousel {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: auto;
  height: 0;
  padding-top: calc(496 / 1200 * 100%); /* 按原宽高比计算高度百分比 */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.slide.active {
  opacity: 1;
}

• padding-top的百分比基于容器宽度，通过计算原图片的高宽比，让容器高度随宽度自动变化
• 设置height:0避免容器产生额外高度

其他说明 #

JS和HTML部分无需修改，保持原有逻辑即可。

内容的提问来源于stack exchange，提问作者M Abraham