无对应样式规则多个div溢出边界，轮播容器大于原图且修改宽高变量图片消失

1. 容器尺寸大于轮播原图的原因 #

• .carousel-container 是原生块级元素，设置width: auto时默认会占满父级的全部可用宽度，而非适配内部子元素的尺寸，自然会比内部的.carousel宽。
• 没有给轮播图片设置适配规则，图片默认按原生尺寸显示，如果.carousel的尺寸大于图片原生尺寸，会出现空白区域，看起来像是容器比图大。

2. 修改变量为非vh/vw值时图片消失的原因 #

• 修改变量时如果漏写单位，会导致--carousel-width/--carousel-height为无效值，.carousel的宽高变为0，配合contain: strict属性（包含paint规则，溢出内容会被裁剪），图片自然完全不可见。
• .carousel设置了contain: strict，但图片没有设置宽高适配.carousel的尺寸，当变量设置的.carousel尺寸和图片原生尺寸比例偏差过大时，图片会被完全裁剪。
• 父容器.carousel-container设置了max-height: 50vh，如果设置的--carousel-height固定值大于当前视口的50vh，.carousel的实际渲染高度会被父容器限制，若同时设置了margin-top，可能导致图片整体被挤出可视区域。
• 懒加载逻辑存在缺陷：images.concat(slide.querySelectorAll('img'))没有赋值给原数组，若轮播项包裹在其他标签内，会导致图片无法加载，出现空白。

CSS修改 #

:root {
    --carousel-width: 500px; /* 可改为任意带单位的有效值，比如70vw、800px等 */
    --carousel-height: calc(9 / 16 * var(--carousel-width)); /* 按比例计算高度，避免比例失调 */
}

/* 新增轮播图片适配规则 */
.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选contain，按需求调整，保证图片适配容器 */
  display: block;
  border-radius: inherit; /* 继承carousel的圆角 */
}

.carousel {
  width: var(--carousel-width);
  height: var(--carousel-height);
  /* 如果不需要极致性能优化可以去掉下面这行，避免异常裁剪 */
  contain: strict;
  margin-top: 1vw;
  border-radius: 3vmin;
  max-height: 1000px;
  max-width: 1000px;
}

/* Hide all carousel slides by default */
.carousel-container .carousel > * {
  display: none;
}

/* Only show the active carousel slide */
.carousel-container .carousel > *.active {
  display: block;
}

.carousel-container {
    /* 新增：宽度适配内容，避免占满父级 */
    width: fit-content;
    height: auto;
    /* 按需调整，避免限制轮播高度 */
    max-height: 100vh;
}

.flex-container {
    display: inline-flex;
    flex-flow: row wrap;
    position: relative;
}

JS修改 #

修复懒加载逻辑缺陷，找到对应代码改为：

carousel.addAction('goto', function(slide, index) {
    let images = [];

    if (slide.tagName.toLowerCase() === 'img') {
        images.push(slide);
    } else {
        // 修复concat没有赋值的问题
        images = images.concat(Array.from(slide.querySelectorAll('img')));
    }

    images.forEach((img) => {
        if (!img.src && img.dataset.src) {
            img.src = img.dataset.src;
        }
    });
});

注意事项 #

• 修改变量--carousel-width、--carousel-height时必须带单位（px、vw、vh均可），避免出现无效值。
• 如果仍然出现异常裁剪问题，可直接删除.carousel的contain: strict配置。

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