Изображение сжимается при изменении размера браузера по высоте, но не при изменении ширины. ⇐ CSS

[Гость]

Я пытаюсь сделать так, чтобы высота ограничивалась высотой устройства, на котором просматривается изображение, чтобы вы могли просматривать все изображение без необходимости прокручивать вниз.

Для этого я использовал:

.специфическое-изображение { дисплей: блок; максимальная высота: 92vh; максимальная ширина: 1240 пикселей; } Итак, если изображение размером 500x1000 пикселей, оно будет иметь высоту 92vh, а если 1000x500, оно будет иметь ширину 1240 пикселей и высоту (скорее всего) меньше 92vh.

Проблема в том, что если я изменю размер браузера по высоте, изображение уменьшится, однако, если я масштабирую ширину, мой браузер обрежет часть изображения, и мне придется прокручивать его по горизонтали, чтобы увидеть все целиком. изображение.

Не знаю, как получить лучшее от обоих миров.

https://codepen.io/BozhidarSK/pen/NBKyyW

.specific-image-flex-container { дисплей: гибкий; } .специфическое-изображение-столбец { гибкий: 4; } .специфический-образ-контейнер-элемент { выравнивание текста: по центру; положение: относительное; отображение: встроенный блок; ширина: 100%; } .специфическое-изображение { дисплей: блок; максимальная высота: 92vh; максимальная ширина: 1240 пикселей; } .stickySpecificContainer { положение: относительное; z-индекс: 2; отображение: встроенный блок;