CSS网格中带有图像的单元格占用了太多空间答案

【问题标题】：Cell with an image in CSS grid takes up too much spaceCSS网格中带有图像的单元格占用了太多空间
【发布时间】：2020-10-01 12:40:32
【问题描述】：

我正在尝试创建一个 3 列布局，其中：

左右列的宽度相等
左列为空
右栏包含图片标题（任意长度的文本）
中间列包含一张图片。图片的高度应为 100%（垂直填充视口）。
加载图片时不会发生布局变化（我在图片中添加了width 和height 属性）。
我打算将它与srcset 和<picture> 一起使用（也提供正确的图像尺寸和jpeg/webp）。我没有在演示中包含这个。

这是我的尝试：

body, figure {
  padding: 0;
  margin: 0;
}

figure {
  max-width: 100vw;
  max-height: 100vh;
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
  
  border: 2px solid red;
}

figure::before {
  content: 'abc';
}

img {
  height: 100%;
  width: auto;
}

<figure>  
  <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat">
  <figcaption>This is a cat</figcaption>
</figure>

这就是它的样子（屏幕截图显示来自 Firefox 开发工具的网格轨迹）：

问题是我用红笔画的这个空间。它使图像的网格单元太宽。我希望它看起来像这样：

这里的网格单元只有它需要的宽度才能适合图像（保持纵横比）。因此，图像水平居中。

我该怎么做？

【问题讨论】：

你会惊讶地看到 chrome 上的输出
哈哈，是的。好吧，我想我会看看我是否得到正确的答案，以及它在 Chrome 中是否看起来不错。为指出这一点而欢呼！

标签： html css responsive-design css-grid

【解决方案1】：

尝试将 justify-content:center 放在图中。和 img 中的 max-width:100%。这将使图像在图中水平居中并使其充分发挥作用。

【讨论】：

不，没有用。并将max-width: 100% 放在图像上使其消失... ;)

【解决方案2】：

我会做一些改变;)

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100%;
  padding: 0;
}

figure {
  max-width: 100vw;
  max-height: 100vh;
  display: grid;
  height: 100%;
  grid-template-columns: 1fr minmax(50%, min-content) 1fr;
  grid-gap: 1rem;
  border: 2px solid red;
}

figure::before {
  content: 'abc';
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

<figure>
  <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat">
  <figcaption>This is a cat</figcaption>
</figure>

【讨论】：

它很接近，但不幸的是它不适合我的需要。在较大的屏幕上，图像的高度不会为 100%。我需要图像垂直填充可用空间。
除非我遗漏了什么，否则图像实际上并没有垂直填充屏幕。即使我将height:100% 添加到<figure>。
照片填充了人物高度的 100%。如果您将图形高度添加 100%，则图形将全屏显示并且 img 垂直居中。
正确。我也需要这个身材100%高。抱歉，如果我没有事先说明清楚。
在示例中，我在图中添加了height:100%

【解决方案3】：

作为一般规则，尽量避免将图像制作成网格或弹性项目。现代浏览器中仍然存在太多错误，无法可靠呈现。

我刚刚在这里写过这个：How can I get an image to fit to the size of a grid cell?

也就是说，这里有一个您可能会觉得有用的解决方案：

body,
figure {
  padding: 0;
  margin: 0;
}

figure {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-gap: 1rem;
  height: 100vh;
  border: 2px solid red;
}

figure::before {
  content: 'abc';
}

div {
  min-height: 0;
}

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

* {
  box-sizing: border-box;
}

<figure>
  <div>
    <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat">
  </div>
  <figcaption>This is a cat</figcaption>
</figure>

【讨论】：

是的，但是您将高度固定为 100vh，我猜他希望元素最大为 100vh，如果图像更小则更少（不确定是否可能）

【解决方案4】：

考虑到图像将是最高元素，您可以将max-height:100vh 移到它上面，这样会更容易：

body, figure {
  padding: 0;
  margin: 0;
}

figure {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  grid-gap: 1rem;
  
  border: 2px solid red;
}

figure::before {
  content: 'abc';
}

img {
  max-height:calc(100vh - 4px); /* considering the border */
  width: auto;
  max-width:100%;
}

<figure>  
  <img src="http://placekitten.com/g/400/600" width="400" height="600" alt="cat">
  <figcaption>This is a cat</figcaption>
</figure>

【讨论】：