CODEWITHSUNDEEP
htmlcssimageresponsive-designgrid
HPA Informática
HPA Informática

Reputation: 1

Image not covering right space using CSS grid

I´m trying to fit an image into a grid, but I don't want to set a specific pixel value, as it should still work at different resolutions.

In the following example, I want all grid items to have the same height and width. I tried object-fit: cover;.

5th item in grid has a random height

<li class="grid">
<a href="#image-6">
    <figure class="effect-apollo">
        <img src="{$e}" alt="image6">
        <figcaption></figcaption> 
    </figure>
</a>

<div class="lb-overlay" id="image-6">
    <img src="{$e}" alt="image6" />
    <div class="gal-info">
        <h3>Tilling</h3>
        <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
    </div>
    <a href="#" class="lb-close">Close</a>
</div>

.lb-album li > a {
width: 100%;
height: inherit;
position: relative;
padding: 10px;
background: none;
border: 1px solid #E4E4E4;
border-radius: 4px;
}

.lb-album li img {
width: 100%;
}

Upvotes: 0

Views: 1592

Answers (1)

Camelopardalus
Camelopardalus

Reputation: 505

You need to set the width and height attributes of your images to 100% so they take up the available space of your grid. object-fit: cover; will keep the aspect ratio of your images.

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

To make the rows equal in height, set grid-auto-rows or grid-template-rows to the desired height, using a responsive unit like vh.

Here's an example: 

#grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 50vh;
    grid-gap: 10px;
}

.grid-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
<div id="grid">
  <div class="grid-item">
    <img src="https://dummyimage.com/200x300/d82121/000">
  </div>
  <div class="grid-item">
    <img src="https://dummyimage.com/600x400/21d861/000">
  </div>
  <div class="grid-item">
    <img src="https://dummyimage.com/300x200/219bd8/000">
  </div>
</div>

Upvotes: 0

Related Questions