我有一个3列2行的布局，使用的网格min-height是90vh。
左列和右列包含一个图像，该图像应该朝着中心列对齐，并且应该垂直对齐(如果图像小于单元格，则不应放大(。但是，图像不应超过其单元格的最大宽度(max-width: 100%(，也不应超过单元格的最大高度(max-height: 100%(；如果是这样，就应该缩小规模。
第二行包含一个标题。此标题应锚定在网格的底部，但不能假定固定的高度。
问题是，当使用min-height而不是height作为网格，使用max-height作为图像时，不会发生图像的缩小。相反，图像会强制网格单元垂直生长。
.container {
display: grid;
grid-template-columns: 1fr 100px 1fr;
grid-template-rows: 1fr auto;
min-height: 90vh;
}
/* these are applied to img elements directly inside the grid */
.left, .right {
max-width: 100%;
max-height: 100%;
align-self: center;
}
.left {
justify-self: right;
}
.right {
justify-self: left;
}
<div class="container">
<img class="left" src="https://i.imgur.com/2byCwGq.jpg"/>
<div class="center">center column</div>
<img class="right" src="https://i.imgur.com/tzPAOIo.jpg"/>
<div>caption left</div>
<div>caption center</div>
<div>caption right</div>
</div>
注意：我使用的是min-height而不是height，因为中间列可能超过90vh，如果我使用height，则网格溢出的内容会与网格本身重叠(这是不希望的(。
下面是一个演示页面。当视口高度降低时，在某个点上，两个图像中较高的一个将足够大，使得其网格单元高度增加，并且总网格高度将超过90vh。
<html>
<head>
<style type="text/css">
.container {
display: grid;
grid-template-columns: 1fr 100px 1fr;
grid-template-rows: 1fr auto;
min-height: 90vh;
background-color: #077;
}
.left, .right {
max-width: 100%;
max-height: 100%;
align-self: center;
}
.left {
justify-self: right;
}
.right {
justify-self: left;
}
.center {
background-color: #770;
}
</style>
</head>
<body>
<div class="container">
<img class="left" src="https://i.imgur.com/2byCwGq.jpg"/>
<div class="center">center column</div>
<img class="right" src="https://i.imgur.com/tzPAOIo.jpg"/>
<div style="background-color: #700">caption left</div>
<div style="background-color: #700">caption center</div>
<div style="background-color: #700">caption right</div>
</div>
<hr/>
<p>after container</p>
</body>
</html>我不确定stackoverflow内联预览是否正确处理视口单位。如果是这样，你可以立即看到图像没有缩小，所以网格的高度肯定超过了90vh。当网格有height而不是min-height时，它是有效的，但一旦网格容器变得太小，它后面的内容可能会与网格容器重叠。
我尝试过很多不同的宽度/高度、对齐自我等组合，但没有成功。
如何使img的max-height: 100%尊重其父网格的单元格高度？
您也可以将等于90vh的max-height属性分配给.left和.right。
也可以使用object-fit属性来包含图像。
.left, .right {
max-width: 100%;
max-height: 90vh;
align-self: center;
object-fit: contain
}