如何让项目卡片图片适配全屏幕？解决小屏幕宽度未铺满问题

我制作的项目卡片在大屏设备上显示正常，但小屏幕下图片无法铺满卡片宽度。.project父元素设置了350px固定宽度，image-box和img均设为100%宽度，按预期应该始终保持350px宽度，但实际并非如此。尝试过object-fit:cover属性及直接设置350px宽度均未解决问题，寻求有效解决方案。

现有代码 #

HTML代码 #

<div className="project">
    <div className="image-box">
        <img src={image_1} alt="Project image" />
    </div>
    <div className="project-title">
        <p>Facebook Clone</p>
    </div>
    <div className="project-actions">
        <a href="" target="_blank" className="icon" title="Code source">
          <FontAwesomeIcon icon={faGithub} color="black" />
        </a>
        <a href="" target="_blank" className="button">Visit</a>
    </div>
</div>

SCSS代码 #

.project {
    width: 350px;
    height: 250px;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px #ffd700;
    }

    .image-box {
        width: 100%;
        height: 180px;
        overflow: hidden;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;

        img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease;

            &:hover {
                transform: scale(1.2);
            }
        }
    }
    
    .project-title {
        background-color: #ffd700;
        p {
            color: #022c43;
            font-size: 20px;
            margin: 0 auto;
            font-weight: 600;
        }
    }
    
    .project-actions {
        display: flex;
        justify-content: space-around;
        align-items: center;
        
        .icon {
            font-size: 30px;
        }

        .button {
            background-color: #022c43;
            color: #ffd700;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            cursor: pointer;
            width: 80px;
            height: 30px;
            border-radius: 5px;
        }
    }
}

解决方案 #

1. 给卡片添加响应式宽度约束 #

将.project的固定宽度改为max-width，同时设置width:100%，让卡片在小屏下能自适应外层容器宽度，避免被强制挤压：

.project {
    width: 100%;
    max-width: 350px;
    // 保留其他原有属性
}

2. 强制图片填充容器 #

给img添加min-width:100%确保不会收缩，配合object-fit:cover保持图片比例的同时填充整个容器：

.image-box img {
    width: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

    &:hover {
        transform: scale(1.2);
    }
}

3. 避免盒模型干扰 #

给.project设置box-sizing:border-box，确保padding和border不会额外增加卡片宽度：

.project {
    box-sizing: border-box;
    // 保留其他原有属性
}

4. 确保外层列表容器响应式 #

如果卡片是放在列表中，给外层容器添加flex-wrap布局，让小屏下卡片自动换行：

.projects-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

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