网格内具有最小高度的最大高度图像应尊重网格的大小而不是扩展它

问题描述 投票：0回答：1

我有一个 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%
尊重其父网格的单元格高度？

html css css-grid
1个回答
0
投票

您也可以将等于 

max-height
的 
90vh
属性分配给 
.left
和 
.right
。
您还可以使用 
object-fit
属性来包含图像。

.left, .right {
  max-width: 100%;
  max-height: 90vh;
  align-self: center;
  object-fit: contain
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.