Image with max-width, and set height - html

Question

I have a lightbox of photos and each photo is assigned a height of 85% of the viewport. When the window width is too small, the image is cut off, so they have a max-width of 100%;
.modal-image {
height: 85vh;
max-width: 90%;
}
However, when the max-width kicks in, the image is distorted because the height remains 85vh while the width changes with the screen width.
How could I keep the images at height 85vh except for when the max-width kicks in, at which point the height should be dynamic.
Thanks for the help

Answer 1

You might have a chance using a container for your image, so you could set the max-width in the container and the height on the image like so:
div {
max-width: 90%;
}
img {
height: 85vh;
object-fit: contain;
}
<div> <img src="https://pixar-community-production.s3-us-west-1.amazonaws.com/News/Effects_MTL_2018/rfm_rewrite.jpg" /> </div>
Using a container with a max-width allow us to have the right width, then using heighton the image allow the image to dynamically calculate its width without loosing its ratio.

Answer 2

You have to look in which screen resolution, the window "becomes" too small and create a css rule specific for every case. For example:
<style>
#media (max-width: 768px) {
.modal-image {
height: 85vh;
max-width: 90%;
}
}
#media (max-width: 1200px) {
.modal-image {
height: 85vh;
max-width: 90%;
}
}
</style>
Greetings!

Answer 3

Update: found an alternative solution
simply gave the image a container of width 85vh and height 85vh, and used object-fit: fill; so that the images scale properly.
<div class="container">
<img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" class="modal-image">
</div>
<style>
.container {
width: 100%;
height: 100vh;
padding: 100px;
object-fit: contain;
}
.modal-image {
width: 100%;
height: 100%;
}
</style>