Posted on Jan 11, 2021

Image overflowing grid item

#help #css #html

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>

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

}