图像未使用CSS网格覆盖正确空间

发布于 2025-02-01 18:46:00 字数 1170 浏览 3 评论 0原文

我正在尝试将图像适合网格，但是我不想设置特定的像素值，因为它仍应在不同的分辨率下工作。

在下面的示例中，我希望所有网格项目具有相同的高度和宽度。我尝试了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%;
}

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身狗的梦 2025-02-08 18:46:00

您需要设置width和height 属性属性为100％，因此它们占据了网格的可用空间。 Object-fit：cover;将保持图像的纵横比。

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

要使行高等分，请使用响应式单元（例如vh 。

这是一个例子：

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

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>

回复收藏 0 原文

~没有更多了~