Подогнать изображение в div с максимальной высотой Xpx и Xvh

Question

Я искал решение, которое позволило бы мне установить максимальную высоту изображения 85vh, а также максимальную высоту в пикселях (чтобы изображение не росло больше, чем я хочу), в то же время используя объект- подходят: содержать.

Мне удалось заставить это работать со следующим. Это лучший подход, который я нашел, так что интересно, если я что-то упустил? Кто-нибудь есть какие-либо рекомендации о том, как похудеть?

.spacer-outer {
	width: 100%;
	text-align: center;
	display: block;
}

.spacer-outer .spacer-inner {
  display: inline-flex;
	max-height: 85vh;
}

.spacer-outer .spacer-inner .image {
	display: inline-flex;
	flex: 1;
	max-height: 750px;
}

.spacer-outer .spacer-inner img {
	max-width: 100%;
	max-height: 100%;				
	object-fit: contain;
}

<div class="spacer-outer">					
	<div class="spacer-inner">
		<div class="image">
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg, https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/1920px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg 2x" width="1920" height="982" title="Test" alt="Test">
		</div> <!-- End of .image -->
	</div> <!-- End of .spacer-inner -->
	<div class="spacer-image-caption">
		Test Caption
	</div> <!-- End of .spacer-image-caption -->
</div>

Answer 1

Вероятно, лучше установить максимальную высоту равной vh, а затем переопределить ее медиазапросом с размером пикселя, где 85vh> 750px;

.image {
    max-height: 85vh;
}

@media (min-height: 882px) {
    .image {
        max-height: 750px;
    }
}