Make image fit CSS Grid

Question

I have a grid in which I position images but they doen't fill the entire space they are given.

I hope the image below illustrates the problem good enough. As we can see the top image as well as the right one don't fill the rows they are assigned to. What causes this and how can I fix it?

Code is like that:

 <section class="wrapper">
   <div class="one">
     <img class="img" src="images/lorem/ipsum.jpg" alt="">
   </div>

   <div class="two">
     <img class="img" src="images/lorem/ipsum2.jpg" alt="">
   </div>

   <div class="three">
     <img class="img" src="images/lorem/ipsum3.jpg" alt="">
   </div>
 </section>

 .wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 20px;
   height: 100vh;
 }

.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
} 

.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}

.img {
  width: 100%;
}

How can I fix this?

You should include the HTML so we can reproduce the problem. These posts may help: [**here**](https://stackoverflow.com/q/46616289/3597276) and [**here**](https://stackoverflow.com/a/47285891/3597276). — Michael Benjamin, May 26 '18 at 12:21
maybe the minmax set at 150px is too much ? can you clarify with your HTML structure and image sizes to demonstrate your issue ... maybe it also have to do with HTML ? — G-Cyrillus, May 26 '18 at 13:53
@G-Cyr I did add the HTML. The fix Yan suggested kinda solves the problem of the gaps but now when I resize the images get cut — Unknown User, May 26 '18 at 14:14
for image you can take a look at https://css-tricks.com/almanac/properties/o/object-fit/ (similar effect than background-size) . The thing is that for the image to fill entire cell grid you will have to cut off part of it or stretch them. if their size size doesn't fit at first. Do you want to stretch them ? — G-Cyrillus, May 26 '18 at 14:24
No I don't want to stretch them. They should keep their aspect ratio. Thanks for the link! — Unknown User, May 26 '18 at 14:53

score 8 · Answer 1 · answered Feb 13 '19 at 03:02

8

add one div to wrap your image, then set image style to .img { max-width: 100%; height: auto }

answered Feb 13 '19 at 03:02

Liang Lyon

164
1
5

did you mean .div-name img{width:100%; height:100%;} – fares Ayyad Oct 16 '19 at 16:45
HTML (with CSS Grid areas):

CSS: graph { grid-area: graph; border: 2px solid darkgreen; padding: 2px; display: block; object-fit: cover; } .img{ max-width: 100%; height: auto – Shanti Jun 25 '20 at 21:39

score 6 · Answer 2 · answered Jul 13 '21 at 13:07

I had a similar problem to this before , the simple solution is to set the height or width to 100% for the img elements to fill their container. Then to set the object fit property to cover for better cropping. You don't even need div containers for your images. Like this:

The grid container will take care of the positioning of the cells.

img{
width: 100%;
height: 100%;
object-fit: cover;
}

score 3 · Answer 3 · edited May 27 '18 at 09:00

3

This is normal because images are preserving their aspect ratio.

A good way to solve this common problem is to set the image as a CSS-background parameter in a div in your grid instead of an <img> tag in html, such as background: url('http://link-to-your-image/image.jpg') and use background-size: cover; on the same element.

This way, the picture will fill out all the space that is attributed to it.

edited May 27 '18 at 09:00

Mr Lister

44,061
15
107
146

answered May 26 '18 at 12:19

Yan

323
1
4
13

Ok, well thanks that helps. I'm surprised. Is this the only way you can solve this issue for images you want in your CSS Grid? – Unknown User May 26 '18 at 13:21
'fit-content: cover' is similar to the background image stuff but for img objects – AGrush Jun 08 '19 at 12:26

score 0 · Answer 4 · answered May 26 '18 at 12:26

0

Try background-size: 100% 100% and background-size: cover or fit

answered May 26 '18 at 12:26

kissan

11
1

score 0 · Answer 5 · answered Jun 01 '22 at 08:06

This worked for me using React with inline styles:

<div 
    style = {{
        gridArea: "image",
        backgroundImage: `url(${imageFromImports})`,
        backgroundSize: "contain",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
    }}
/>

Make image fit CSS Grid

5 Answers5