制作动态CSS卡片：自适应填充与Live Server图片尺寸异常问题

我正在制作自适应的动态CSS卡片，希望它们均匀填充屏幕中间区域。代码在VS Code的HTML预览扩展中正常，但在Live Server环境下，图片会恢复默认尺寸，完全无视设置的尺寸限制。

原HTML代码 #

<div id="cards">
    <div class="mbhs">
        <div class="image">
            <img src="content/MBHS.jpg" alt="MBHS">
        </div>
        <div class="top">
            Title
        </div>
        <div class="exp">
            Example text here
        </div>
        <div class="comp">
            Example text
        </div>
    </div>
    <div class="ominous">
        <div class="image">
            <img src="content/ominous.jpg" alt="Ominous">
        </div>
        <div class="top">
            Title
        </div>
        <div class="exp">
            Example text here
        </div>
        <div class="comp">
            Example text
        </div>
    </div>
</div>

原CSS代码 #

#cards {
    display: flex;
    justify-content: space-evenly;
}

#cards > * {
    width: 40%;
    padding-top: 10px;
    padding-bottom: 10px;
}

#cards > * > .image {
    width: auto;
    height: auto;
    max-width: MaxSize;
    max-height: MaxSize;
}

#cards > * > .top {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: clamp(2em, 2vw, 4em);
}

#cards > * > .comp {
    color: #6CACE4;
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

#cards > * > .exp {
    line-height: 24px;
    color: #C4C4C4;
    font-size: 16px;
    font-weight: 200;
    text-align: left;
}

解决方案 #

核心问题是CSS中的MaxSize不是合法属性值，浏览器无法识别，导致Live Server下该规则被忽略。修改图片相关样式即可解决：

#cards {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap; /* 小屏幕自动换行 */
    gap: 20px; /* 替代justify-content，间距更可控 */
}

#cards > * {
    width: 40%;
    padding: 10px 0; /* 简化上下内边距写法 */
}

#cards > * > .image {
    width: 100%; /* 容器占满卡片宽度 */
    height: auto;
    overflow: hidden; /* 防止图片超出容器 */
}

#cards > * > .image img {
    width: 100%; /* 图片自适应容器宽度 */
    height: auto; /* 保持宽高比 */
    display: block; /* 去除图片底部默认间隙 */
}

/* 以下样式保持不变 */
#cards > * > .top {
    padding: 10px 0;
    font-size: clamp(2em, 2vw, 4em);
}

#cards > * > .comp {
    color: #6CACE4;
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 20px;
    text-align: left;
    padding: 10px 0;
}

#cards > * > .exp {
    line-height: 24px;
    color: #C4C4C4;
    font-size: 16px;
    font-weight: 200;
    text-align: left;
}

修改说明 #

1. 替换无效的MaxSize为100%，让图片容器和图片都自适应卡片宽度
2. 为<img>标签添加样式，确保图片保持宽高比且无底部间隙
3. 给#cards添加flex-wrap: wrap和gap，优化小屏幕布局体验
4. 简化内边距写法，让代码更简洁

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