DEV Community

Image overflowing grid item

Hey everyone! I’ve tried everything with this for about 3 hours now and I can’t seem to figure out a solution. For some reason, my image keeps overflowing the grid item! Any help you could offer would be so so appreciated.

I’ve tried declaring a 100% width in the HTML for the image, which does scale it down to fit within the box, but it doesn’t reach the bottom and also doesn’t respond well to rescaling. So now I’m trying that along with applying object-fit: cover, but now it’s just a massive image again. I tried doing a background-size: cover, but that didn’t seem to do anything at all, so maybe I just did it wrong. Does anyone have any ideas? I’m pretty new to the grid.

HTML

<section id="grid">
    <div class="box">
        <div class="img-content"><img src="./images/hp-img1.png" width:100%></div>
    </div>

    <div class="box">
        <div class="box-content">Box 2</div>
    </div>

    <div class="box">
        <div class="box-content">Box 3</div>
    </div>

    <div class="box">
        <div class="box-content">Box 4</div>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

SCSS

grid {

display: grid;
grid-template-columns: repeat(1, 1fr);
background-size: cover;

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $white;
    overflow: hidden;
    object-fit: cover;

    .box-content {
        padding: 3rem 4rem;
    }

    &:nth-child(1) {
        background: $blue;
    }

    &:nth-child(2) {
        background: $black;
        color: $blue;
    }

    &:nth-child(3) {
        background: $white;
        color: $blue;
    }

    &:nth-child(4) {
        background: $red;
    }
}
Enter fullscreen mode Exit fullscreen mode

}

Discussion (2)

Collapse
karlenkhachaturyan profile image
Karlen Khachaturyan

Hey Nicole, I think you will find the answer by this link. Hope it helps.
stackoverflow.com/questions/433119...

Collapse
condinoaljoseph profile image
elpmid

Hello