图片容器底部多余空白问题求助（附HTML/CSS代码）

数据老陈

2026-8-20

解决图片底部空白的CSS布局问题

问题分析

你遇到的差异原因在于：

图片设置了width: max-content和height: max-content，这会让图片完全按自身原始尺寸渲染，但容器.project用的是视窗单位（vw/vh），当图片本身的实际渲染尺寸（比如SVG的viewBox存在留白设置）和容器尺寸不匹配时，就会出现底部空白。
另一张图片能正常填满，大概率是它的原始尺寸和容器实际渲染尺寸刚好匹配，或是SVG的viewBox没有多余留白。

快速修复方案

直接强制图片填满容器，修改图片的CSS样式，把宽高设为100%，配合object-fit: cover保证图片比例正常：

/* controls the image of the cards */
.pp-container .main img {
    background-color: blueviolet;
    display: block;
    width: 100%; /* 改为100%，匹配容器宽度 */
    height: 215px; /* 固定高度匹配你的需求，也可用100%占满容器高度 */
    object-position: center;
    object-fit: cover;
    border-radius: 15%;
    transition: 0.3s;
    box-shadow: 0 0 0;
    /* 移除无效的 transform: box-shadow; */
}

如果希望图片高度自适应容器，给.project添加flex布局，让图片自动占满可用空间：

/* controls the project card div*/
.project {
    /* background-color: chartreuse; */
    min-width: 14vw;
    max-width: 14vw;
    min-height: 35vh;
    max-height: 35vh;
    text-align: center;
    transition: 0.3s;
    transform: scale(1);
    /* overflow: hidden; */
    /* 新增flex布局，让图片和文字垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pp-container .main img {
    background-color: blueviolet;
    display: block;
    width: 100%;
    flex: 1; /* 占满容器剩余高度 */
    object-position: center;
    object-fit: cover;
    border-radius: 15%;
    transition: 0.3s;
    box-shadow: 0 0 0;
}