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

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

左右立柱的宽度相等 左边的柱子是空的 右列包含图像标题和任意长度的文本 中间列包含一个图像。图像的高度应为100%，垂直填充视口。 当图像加载我在图像上包含的宽度和高度属性时，不会发生布局移动。 我打算将它与srcset一起使用，并提供正确的图像大小和jpeg/webp。我没有把它包括在演示中。 以下是我的尝试：

身躯{ 填充：0； 保证金：0； } 身材{ 最大宽度：100vw； 最大高度：100vh； 显示：网格； 网格模板列：1fr最小内容1fr； 网格模板行：1fr； 网格间距：1rem； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } img{ 身高：100%； 宽度：自动； } 这是一只猫

---

尝试在图中放置justify content:center，在img中最大宽度为100%。

---

这将使图像在图形中水平居中，并使其拍摄完整图像

尝试在图中放置justify content:center，在img中最大宽度为100%。

---

这将使图像在图形中水平居中，并使其拍摄完整图像

我会做一些改变

* { 保证金：0； 填充：0； } html， 身体{ 身高：100%； 填充：0； 保证金：0； } 身体{ 最小高度：100%； 填充：0； } 身材{ 最大宽度：100vw； 最大高度：100vh； 显示：网格； 身高：100%； 网格模板列：1fr minmax50%，min content 1fr； 网格间距：1rem； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } img{ 对象匹配：包含； 宽度：100%； 身高：100%； } 这是一只猫

---

我会做一些改变

* { 保证金：0； 填充：0； } html， 身体{ 身高：100%； 填充：0； 保证金：0； } 身体{ 最小高度：100%； 填充：0； } 身材{ 最大宽度：100vw； 最大高度：100vh； 显示：网格； 身高：100%； 网格模板列：1fr minmax50%，min content 1fr； 网格间距：1rem； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } img{ 对象匹配：包含； 宽度：100%； 身高：100%； } 这是一只猫

---

一般来说，尽量避免将图像制作成网格或flex项目。现代浏览器中仍然有太多的bug，阻碍了可靠的渲染

我刚才在这里写到：

也就是说，您可能会发现以下解决方案很有用：

身体 身材{ 填充：0； 保证金：0； } 身材{ 显示：网格； 网格模板列：1fr最小内容1fr； 网格间距：1rem； 高度：100vh； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } div{ 最小高度：0； } img{ 对象匹配：覆盖； 身高：100%； 垂直对齐：底部对齐； } * { 框大小：边框框； } 这是一只猫

---

一般来说，尽量避免将图像制作成网格或flex项目。现代浏览器中仍然有太多的bug，阻碍了可靠的渲染

我刚才在这里写到：

也就是说，您可能会发现以下解决方案很有用：

身体 身材{ 填充：0； 保证金：0； } 身材{ 显示：网格； 网格模板列：1fr最小内容1fr； 网格间距：1rem； 高度：100vh； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } div{ 最小高度：0； } img{ 对象匹配：覆盖； 身高：100%； 垂直对齐：底部对齐； } * { 框大小：边框框； } 这是一只猫

---

考虑到图像将是最高元素的事实，您可以将最大高度：100vh移动到它，这将更容易：

身躯{ 填充：0； 保证金：0； } 身材{ 显示：网格； 网格模板列：1fr auto 1fr； 网格模板行：1fr； 网格间距：1rem； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } img{ 最大高度：calc100vh-4px；/*考虑到边界*/ 宽度：自动； 最大宽度：100%； } 这是一只猫

---

考虑到图像将是最高元素的事实，您可以将最大高度：100vh移动到它，这将更容易：

身躯{ 填充：0； 保证金：0； } 身材{ 显示：网格； 网格模板列：1fr auto 1fr； 网格模板行：1fr； 网格间距：1rem； 边框：2倍纯红； } 图：之前{ 内容：“abc”； } img{ 最大高度：calc100vh-4px；/*考虑到边界*/ 宽度：自动； 最大宽度：100%； } 这是一只猫

---

不，没用。在图像上加上最大宽度：100%使其消失；不，没用。在图像上加上最大宽度：100%使其消失；很接近，但不幸的是它不适合我的需要。在较大的屏幕上，图像的高度不会达到100%。我需要图像垂直填充可用空间。除非我遗漏了什么，否则图像实际上不会垂直填充屏幕。甚至当我把高度加进去的时候：100%的高度。照片占据了人物高度的100%。如果将地物高度100%添加到

---

n图形将全屏显示，img垂直居中。正确。我也需要100%的身材。对不起，如果我没有事先说清楚。在这个例子中，我添加了高度：100%来表示接近，但不幸的是，它不适合我的需要。在较大的屏幕上，图像的高度不会达到100%。我需要图像垂直填充可用空间。除非我遗漏了什么，否则图像实际上不会垂直填充屏幕。甚至当我把高度加进去的时候：100%的高度。照片占据了人物高度的100%。如果添加100%的图形高度，则图形将全屏显示，且img垂直居中。正确。我也需要100%的身材。对不起，如果我没有事先说清楚。在这个例子中，我在图中添加了高度：100%。你会惊讶地看到chromeHaha上的输出，是的。嗯，我想我会看看我是否得到了一个正确的答案，以及它在Chrome中是否看起来不错。为指出这一点干杯！你会惊讶地看到chromeHaha的输出，是的。嗯，我想我会看看我是否得到了一个正确的答案，以及它在Chrome中是否看起来不错。为指出这一点干杯！是的，但你将高度固定为100vh，我猜他希望元素最大值为100vh，如果图像较小，则小于100vh。不确定是否可能是btwyes，但你将高度固定为100vh，我猜他希望元素最大值为100vh，如果图像较小，则小于100vh。不确定是否可能是btw