如何在 CSS GRID 中实际排列图像？

Question

我有一个 svg 图像（带有 class content__img），默认宽度为 760.7，高度为 687.08，在grid容器中有2列2行```1fr```，找到这张图片在第一个单元格中，由于图像尺寸大于第一行，图像放大了行的高度：

考虑到这一点

1.-如果我指定图片有高度来自 100% 图像不适合第一行的高度为什么会这样？那不应该是行的大小吗？因为使用块类型元素（以及其他一般元素）如果他们采用当前行的大小，据我所知，默认情况下他们采用单元格的宽度和高度（它也无法将 display: block 分配给图像）

HTML:

<body>
    <div class="content">
        <img class="content__img" src="../../assets/images/test.svg" alt="Test">
    </div>
</body>

CSS:

.content {
    width: 80%;
    height: 80%;

    background-color: beige;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.content__img {
    height: 100%;
}

2.- 如果我将图像包裹在容器中 div （使用 class content__img-box），这也不起作用，尽管 div 取单元格 100% 的宽度和高度，因此，如果我将图像的高度设置为 100%，为什么图像不从 div (content__img-box)?

中获取 100%

HTML:

<body>
    <div class="content">
        <div class="content__img-box">
            <img class="content__img" src="../../assets/images/test.svg" alt="Test">
        </div>
    </div>
</body>

CSS:

.content {
    width: 80%;
    height: 80%;

    background-color: beige;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.content__img {
    height: 100%;
}

这是我想要的结果（显然你可以给行一个固定的或非动态的大小，这是可行的，但目的是如果网格容器增长，图像就会受到攻击）：

Answer 1

如约而至，说明：

grid-template-rows: 1fr 1fr; 将无法正常工作。不幸的是 1fr 因为 template-row 是 counter-intuitive。它根本不会关心 parents 高度。 1fr 1fr 将采用两行的最高行高，并为另一行添加相同的高度。因此，容器高度将被覆盖并因此被破坏。要使 50% 50% 正常工作，您需要为 grid-contaienr 指定一个特定的高度！
我将图像包裹在 <div> 中。这样做的全部原因是添加 object-fit 属性。这将允许我调整图像大小以适应包含的 <div> 而不会破坏它的 aspect-ratio 并且不会成为 clipped。我在图像本身中添加了 max-height-width: 100%;。这将使 down-size 图像适合容器（不会溢出容器）。但也允许图像比容器小。如果我不添加它但使用固定的 100%，图像 aspect-ratio 将被更改为图像然后将填充整个高度和宽度，无论宽高比如何。我还添加了 display:flex, justify-content: center; align-items: center;。如果图像没有填满整个 grid-card，这会将图像移动到 grid-card 的中心。

.content {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50% 50%;
}

.content > div {
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}

.content > div > img {
  max-height: 100%;
  max-width: 100%;
}

/*for demonstration purpose only */
body {
  margin: 0;
}
.content > div {
  border: 2px solid red;
}

<div class="content">
  <div>
    <img src="https://via.placeholder.com/1024x720.svg">
  </div>
  <div>
    <img src="https://via.placeholder.com/800.svg">
  </div>
  <div>
    <img src="https://via.placeholder.com/1920x1080.svg">
  </div>
  <div>
    <img src="https://via.placeholder.com/150x300.svg">
  </div>
</div>

如何在 CSS GRID 中实际排列图像？

How to actually arrange images in CSS GRID?

html

css

css-grid