img scale to viewport inside div - html

Question

I'm building an image lightbox with a close button. The Image should scale to it's default size until it hits a maximum of 90% page width/height.
This works fine with smaller images than the maximum, anything above will overflow the container div.
Here is my codepen example:
https://codepen.io/gempir/pen/eMYmyx
How do I force the image to scale?
Setting
img {
max-height: 100%;
max-width: 100%;
}
Does not help because the parent div has no fixed width. Any idea how to handle this situation correctly, besides using JS to calculate on the fly.
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-overlay .image-container {
display: inline-block;
position: relative;
max-width: 90% !important;
max-height: 90% !important;
background: blue;
}
.image-overlay .image-container .close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
}
.image-overlay .image-container img {
display: block;
max-height: 100%;
max-width: 100%;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>

Answer 1

Use viewport units instead:
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-overlay .image-container {
display: inline-block;
position: relative;
max-width: 90% !important;
max-height: 90% !important;
background: blue;
}
.image-overlay .image-container .close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 5px;
}
.image-overlay .image-container img {
display: block;
max-height: 90vh;
max-width: 90vw;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>
This will restrict your image based on the actual viewport available, instead of the container, your image is in.
Codepen example

Answer 2

You can use vmin and vmax to deal with this if you want to change behaviour depending on the viewport.
.image-overlay {
display: flex;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0, .25);
text-align: center;
user-select: none;
justify-content: center;
align-items: center;
}
.image-container {
display: block;
position: relative;
background: blue;
}
.close {
position: absolute;
top: 5px;
right: 5px;
color: white;
background: rgba(0,0,0,0.5);
padding: 5px;
}
img {
display: block;
max-width: 90vmin;
max-height: 90vmin;
}
<div class="image-overlay">
<div class="image-container">
<img src="https://picsum.photos/g/1800/1800">
<div class="close">close</div>
</div>
</div>
Explanation:
vmin = 1%of min viewport size (width or height, equals to vh or vw depending on which one is the smaller)
vmax = the opposite of vmin.
what can vmin and vmax do?
you can use vh and vw (or % depending on the situation) to resize images, but sometimes they look too small on smartphones, so you can use:
.images{
max-width: 90vmin;
max-height: 90vmin;
}
#media(max-width:600px){
.images{
max-width: 90vmax;
max-height: 90vmax;
}
}
they'll fit well on computer viewports (or even smart TV etc) and will be a bit bigger on smartphones.