How to make Image responsive for all screens

I am creating a project card that contain image and more details. In large screens the style is as expected working fine, but in smaller screens the image change it is behavior and do not cover the whole card width like before.

This is the html code:

<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>

This is the scss code:

    .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 link : https://github.com/Kiritsu0/Portfolio-React

What is happening from my understanding is that the project parent have a 350px width, and the image-box is 100% so it is 350px, and the image is 100% so it is 350px too, and since the width of the project is always 350px so the width of the image should not change in all screens, but this is not happening, I think about it many times, but from what I understand this behavior should not happen.

I tried using object-fit: cover property but it didn't solve the problem, also tried to put the direct width of the image and the image-box to 350px but still did not work.

Solution

The issue is because of the media query you have set. The media query is in src/components/Layout/index.scss. You are restricting the width of the image. Remove the max-width and the image displays properly.

@media screen and (max-width: 1200px) {
  .container {

    &.portfolio-page {

      .image-box {
        height: 200px;
        /* max-width: calc(50% - 10px); REMOVE THIS */
      }
    }
  }
}