max-height image inside of grid with min-height should respect the grid's size rather than extending it
Question
I have a layout with 3 columns, 2 rows, using a grid whose min-height is 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% ); 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. 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).
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.
<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. If it does, you can immediately see that the images are not getting downscaled, so the grid's height definitely exceeds 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.
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?
1 answers
solution1
0 2021-05-29 15:08:52
You can assign a max-heigh t property equal to 90vh to .left and .right as well.
You can also use object-fit property to contain the image.
.left, .right {
max-width: 100%;
max-height: 90vh;
align-self: center;
object-fit: contain
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.