使图像适合 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?

Answer 1

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

Answer 2

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

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

Answer 4

尝试 background-size: 100% 100% 和 background-size: cover or fit

Answer 5

This worked for me using React with inline styles:

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

Answer 6

I finally discovered the rules to dynamically resizing images within a css grid. They are:

1. Every nested grid element of the parent grid must have min-height: 0 set, including the img tag itself
2. The img tag must also define max-width: 100%
3. The immediate grid parents of the img tags must also have min-width: 0 set for the align- and justify- properties to work correctly

Here is sample code that will work:

// parent
<div css={{
    display: "grid",
    gridTemplateRows: "max-content 1fr",
    height: "50vh",
    maxHeight: "50vh",
}}>
    <header></header>

    <div css={{
      display: "grid",
      gridTemplateRows: "3fr 2fr",
      minHeight: 0,
    }}>
        <div css={{
          display: "grid",
          minHeight: 0,
          minWidth: 0,
        }}>
            <img
                css={{
                  maxHeight: "100%",
                  minHeight: 0,
                  borderRadius: 10,
                }}
            />
        </div>

        <div css={{
          display: "grid",
          minHeight: 0,
        }}>
            {imgs.map(img => 
                <div css={{
                  display: "grid",
                  minHeight: 0,
                  minWidth: 0
                }}>
                    <img
                        css={{
                          maxHeight: "100%",
                          minHeight: 0,
                          borderRadius: 10,
                        }}
                    />
                    <p>...</p>
                </div>
            }
        </div>
    </div>
</div>