使用CSS网格不覆盖右空间的图像

Question

我试图将一幅图像放入grid中，但我不想设置一个特定的像素值，因为它仍然可以在不同的分辨率下工作。

在下面的示例中，我希望所有网格项都具有相同的高度和宽度。我试过object-fit: cover;。

网格中的第五项具有随机高度。

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

Answer 1

您需要将图像的width和height属性设置为100%，以便它们占用网格的可用空间。object-fit: cover;将保持图像的高宽比。

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

若要使行的高度相等，请使用响应单元(如grid-auto-rows或grid-template-rows )将其设置为所需的高度。

下面是一个例子：

#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>

​