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

Question

I have a layout with 3 columns, 2 rows, using a grid whose min-height is 90vh .我有一个 3 列 2 行的布局，使用min-height为90vh的网格。

The left and right columns contain an image, which is supposed to be justified towards the center column, and it is supposed to be aligned vertically (it should not be enlarged if it is smaller than its cell).左右两列包含一个图像，该图像应该朝向中心列对齐，并且应该垂直对齐（如果它小于其单元格，则不应放大）。 However, the image should not exceed the maximum width of its cell ( max-width: 100% ), and it should not exceed the maximum height of its cell ( max-height: 100% );但是，图像不应超过其单元格的最大宽度（ max-width: 100% ），并且不应超过其单元格的最大高度（ max-height: 100% ）； if it does, it should be downscaled.如果是这样，它应该被缩小。

The second row contains a caption.第二行包含一个标题。 This caption should be anchored at the bottom of the grid, but no fixed height can be assumed.此标题应锚定在网格底部，但不能假定固定高度。

The problem is that when using min-height instead of height for the grid, and max-height for the image, no downscaling of the images occurs.问题是当网格使用min-height而不是height时，图像使用max-height时，不会发生图像的缩小。 Instead, the image forces the grid cell to grow vertically.相反，图像会强制网格单元垂直增长。

.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>

Note : I am using min-height rather than height because the middle column may exceed 90vh , and if I use height , the overflowing content from the grid overlaps the grid itself (which is undesirable).注意：我使用min-height而不是height因为中间列可能超过90vh ，如果我使用height ，网格中溢出的内容会与网格本身重叠（这是不可取的）。

Below is a demo page.下面是一个演示页面。 When the viewport height is reduced, at some point the taller of the two images will be big enough such that its grid cell height is increased and the total grid height will exceed 90vh.当视口高度降低时，在某些时候，两个图像中较高的一个将足够大，以至于其网格单元格高度增加并且总网格高度将超过 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>

I'm not sure if the stackoverflow inline preview handles viewport units correctly.我不确定 stackoverflow 内联预览是否正确处理视口单元。 If it does, you can immediately see that the images are not getting downscaled, so the grid's height definitely exceeds 90vh .如果是这样，您可以立即看到图像没有缩小，因此网格的高度肯定超过90vh 。 When the grid has height instead of min-height , it works, but the content after the grid container may overlap the grid container once it gets too small.当网格有height而不是min-height时，它可以工作，但是一旦网格容器太小，网格容器之后的内容可能会与网格容器重叠。

I have tried a bunch of different combinations with width/height, align-self, etc., but no luck.我尝试了一堆不同的宽度/高度组合，对齐自我等，但没有运气。

How can I make it so that the img's max-height: 100% respects its parent grid's cell height?如何使 img 的max-height: 100%尊重其父网格的单元格高度？

Answer 1

You can assign a max-heigh t property equal to 90vh to .left and .right as well.您也可以将等于90vh的max-heigh height t 属性分配给.left和.right 。
You can also use object-fit property to contain the image.您还可以使用object-fit属性来包含图像。

.left, .right {
  max-width: 100%;
  max-height: 90vh;
  align-self: center;
  object-fit: contain
}

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

问题描述

1 个解决方案

解决方案1
0 2021-05-29 15:08:52

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

问题描述

1 个解决方案

解决方案1 0 2021-05-29 15:08:52

解决方案1
0 2021-05-29 15:08:52