如何使图像响应所有屏幕

Question

我正在创建一个包含图像和更多细节的项目卡。在大屏幕中，样式按预期工作正常，但在较小的屏幕中，图像改变了它的行为，并且不像以前那样覆盖整个卡片宽度。

这是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;
            }
        }
    }

Github 链接：https://github.com/Kiritsu0/Portfolio-React

根据我的理解，项目父级的宽度为 350px，图像框为 100%，因此为 350px，图像为 100%，因此也是 350px，并且由于项目的宽度是始终为 350px，因此图像的宽度不应在所有屏幕上改变，但这并没有发生，我想了很多次，但据我了解，这种行为不应该发生。

我尝试使用object-fit: cover属性但它没有解决问题，还尝试将图像和图像框的直接宽度设置为350px但仍然不起作用。

Answer 1

问题是由您设置的媒体查询引起的。您正在限制图像的宽度。

@media screen and (max-width: 1200px) {
    .container.portfolio-page .image-box {
        height: 200px;
        max-width: calc(50% - 10px); /* Remove this setting and the image will fill the space accordingly. */
    }
}