添加display:flex/grid后图片消失的问题排查与解决

问题 #

我跟着YouTube教程做网站图片滑块，教程要求给.slides容器设置display:flex让滑块并排，再配合JavaScript实现功能。我的每个滑块包含图片和右侧文本，但设置display:flex后图片消失，只剩文本框并排；尝试改用display:grid（列数等于滑块数量）时问题完全相同。附上相关CSS与HTML代码，请求解决该问题。

代码片段 #

CSS

.slides-container {
    width: 100%;
    margin: auto;
    margin-bottom: 7rem;

    .slides {
        display: flex;
        // also tried this
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        width: 100%;
    }
}

.slide {
    @include gridRepeat(2); // puts slide in display: grid with 2 columns
    border-radius: 10px;

    .img-container img{
        width: 100%;
        height: 445px;
        object-fit: cover;
        border-radius: 20px 0 0 20px;
    }

    .img-side-info {
        background-color: $light-grey;
        border-radius: 0 20px 20px 0;
        @include flexCenter(column); // display: flex and center everything with direction column
        align-items: flex-start;
        gap: 1rem;
        padding: 0 5rem;

        .words {
            font-size: 23.5px;
            font-weight: lighter;
            letter-spacing: 0.05px;
        }

        .name {
            font-size: 16px;
        }

        a {
            font-size: 14px;
            font-weight: bold;
        }
    }
}

HTML

<div class="slides-container">
    <div class="slides">
        <!-- slide 1 -->
        <div class="slide">
            <div class="img-container">
                <img src="/airbnb/media/img-slider/slide-img-1.jpg" alt="">
            </div>
            <div class="img-side-info">
                <p class="words">
                    "Hosting has been so rewarding and life-changing. It’s allowed us to pursue our passion for interior design and helped us realise our niche – that we really love renovating spaces for others to enjoy."
                </p>
                <p class="name">
                    Catherine,<br>
                    interior designer and Host in Columbus, Ohio
                </p>
                <a href="">Get host tips</a>
            </div>
        </div>
        <!-- slide 2 -->
        <div class="slide">
            <div class="img-container">
                <img src="/airbnb/media/img-slider/slide-img-2.jpg" alt="">
            </div>
            <div class="img-side-info">
                <p class="words">
                    "Give yourself permission to play. I’ve poured so much love into restoring this space – and I think guests come back for that very reason."
                </p>
                <p class="name">
                     Tiffany,<br>
                     former creative director and Host in Hollywood Beach, California
                </p>
                <a href="">Get host tips</a>
            </div>
        </div>
        <!-- slide 3 -->
        <div class="slide">
            <div class="img-container">
                <img src="/airbnb/media/img-slider/slide-img-3.jpg" alt="">
            </div>
            <div class="img-side-info">
                <p class="words">
                    "The part that I love most about hosting is the design and curating the spaces for the guests – cool details and making things they can interact with. You're helping them create memories."
                </p>
                <p class="name">
                     Jordan,<br>
                     architect and Host in Denver, Colorado
                </p>
                <a href="">Visit her profile</a>
           </div>
       </div>
    </div>
</div>

解决方案 #

问题原因 #

你的.slide元素通过gridRepeat(2)混合宏生成了2列的Grid布局，但当父容器.slides设置为flex/grid时，.slide的宽度会被自动挤压。Grid布局下，列宽默认会根据内容优先级收缩，文本部分的内容会抢占所有可用空间，导致图片容器的宽度被压缩至0，所以图片无法显示。

修复方案 #

1. 给.slide设置固定宽度
   为每个.slide设置明确的宽度，避免被父容器挤压。如果是单滑块轮播，设置width: 100%和min-width: 100%强制滑块占满容器宽度：

   .slide {
       @include gridRepeat(2);
       border-radius: 10px;
       width: 100%;
       min-width: 100%; /* 防止flex容器下自动收缩 */
   }
   

2. 优化.slides的flex布局
   如果是横向轮播场景，给.slides添加overflow: hidden隐藏超出容器的滑块，同时设置flex-wrap: nowrap强制滑块不换行，配合JavaScript控制位移实现轮播：

   .slides {
       display: flex;
       width: 100%;
       overflow: hidden;
       flex-wrap: nowrap;
   }
   

3. 验证图片路径有效性
   检查浏览器控制台是否有图片404错误，确认图片路径/airbnb/media/img-slider/slide-img-1.jpg正确无误，排除路径问题导致的图片不显示。

完整修改后的CSS #

.slides-container {
    width: 100%;
    margin: auto;
    margin-bottom: 7rem;

    .slides {
        display: flex;
        width: 100%;
        overflow: hidden;
        flex-wrap: nowrap;
    }
}

.slide {
    @include gridRepeat(2);
    border-radius: 10px;
    width: 100%;
    min-width: 100%;

    .img-container img{
        width: 100%;
        height: 445px;
        object-fit: cover;
        border-radius: 20px 0 0 20px;
    }

    .img-side-info {
        background-color: $light-grey;
        border-radius: 0 20px 20px 0;
        @include flexCenter(column);
        align-items: flex-start;
        gap: 1rem;
        padding: 0 5rem;

        .words {
            font-size: 23.5px;
            font-weight: lighter;
            letter-spacing: 0.05px;
        }

        .name {
            font-size: 16px;
        }

        a {
            font-size: 14px;
            font-weight: bold;
        }
    }
}

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