HTML/CSS Image box (popup) adjusting to variable images size - html

Question

I am trying to create a box over a dark background to show a picture over the content (as many sites do). There should be a dark color filling the screen (OK), a box centered on the screen (OK) with a 1em space between the box border and the picture. The picture can be portrait or landscape, and should be resized so it doesn't exceed either 90% height and width (keeping ratio). I am trying to do that purely in CSS/HTML, without javascript (if possible) My goal
Here is the code I currently have:
HTML:
<div id="picture_viewer_container" class="picture_viewer_container">
<div id="picture_viewer_content" class="box">
<span id="picture_viewer_content_close">Fermer</span>
<div id="picture_viewer_content_picture">
<img src="data:image/jpeg;base64,xxx">
</div>
</div>
</div>
CSS
.box {
background-color:#F6E9F7;
border:1px solid #E298EA;
}
.picture_viewer_container {
position:fixed;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index:1000;
align-items: center;
display: flex;
justify-content: center;
}
#picture_viewer_content {
padding:1em 1em 1em 1em;
position:relative;
}
#picture_viewer_content_close {
position:absolute;
right:0;
top:0;
}
#picture_viewer_content_picture {
display:inline;
}
#picture_viewer_content_picture img {
max-width:90%;
max-height:90%;
}
Current issues:
a landscape picture gets more than 1em of margin on the left and right side, but proper margin above and below
a portrait picture ignores the max-height and is bigger than the screen.

Answer 1

Use auto with your CSS img height.
#picture_viewer_content_picture img {
max-width:90%;
height:auto;
}
If you need other solutions, something like adaptive-images may be something to look into.