overflow: hidden; not working on image inside grid

Question

I have an image inside of a grid, I want the image to fill the grid container, and hide any overflow, see code:

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}

#broadcastProductionImage1 {
    object-fit: cover;
    justidy-self: center;
    align-self: center;
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 2 / 1 / 3 / 2;
    overflow: hidden;
}

you can see I've tried putting overflow: hidden on both the image itself, and on the grid parent, neither seem to have any effect, I've used both object-fit: cover; and min-width: 100%; min-height: 100%; to attempt achieving my desired results, neither seems to yield what I want, it does appear to work once I define either width or height without the min, but those both mess up the images ability to dynamically scale and fit the container.

suggestions?

user_2720657 · Answer

The problem is, that u set a overflow: hidden directly to your images, but overflow: hidden works differently.
For example you create a div with a height and a width and give it overflow: hidden, your images inside won't overlap anymore.

Of course you set overflow:hidden to your .serviceGridImage but this contains both images, so nothing is overflowing .serviceGridImage right now. Your images overflowing the grid, not the div.

You can fix your current problem if you give the images a max-height value.

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}

#broadcastProductionImage1 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    grid-area: 2 / 1 / 3 / 2;
    overflow: hidden;
}

.serviceGridImage img {
    max-height: 100%;
}

Or change your HTML structure like this:

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}
.image {
  display: grid;
  grid-area: 1 / 1 / 2 / 2;
  overflow: hidden;
}

.image.second {
   grid-area: 2 / 1 / 3 / 2; 
}

#broadcastProductionImage1 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    
    overflow: hidden;
}

#broadcastProductionImage2 {
    object-fit: cover;
    justify-self: center;
    align-self: center;
    overflow: hidden;
}

overflow: hidden; not working on image inside grid

1 Answers