Отзывчивое изменение размера изображения в Popup ... Высокие изображения получают cutoff

Question

Итак, у меня есть всплывающее окно, которое открывается для галереи. Ширина изображения во всплывающем меню устанавливается равной 100%, растягиваясь, чтобы соответствовать его содержанию div. И высота устанавливается на авто, поэтому высота будет изменяться в зависимости от ширины (то же соотношение). Это отлично подходит для широких изображений ... но для высоких изображений высокие изображения обрезаются в нижней части страницы. Если высота слишком высокая (и обрезание изображения), то я хочу, чтобы высота уменьшалась до другого размера и ширины для регулировки. Я пробовал max-height, но это искажает соотношение изображений (уменьшая высоту, но не влияя на ширину). У кого-то есть лучшее решение?

Вы можете увидеть проблему здесь: Webpage

Нажмите на изображение внешней белой двери, с цветочными кустами (8-е изображения). Вы увидите, что изображение слишком высокое для страницы, и его обрезают.

Вот изображение вопроса

Любые идеи?

Answer 1

Вы хотите иметь только CSS-решение? Можете ли вы использовать Javascript? Если вы можете использовать Javascript, вы можете добавить условие, чтобы увидеть, превышает ли высота изображения высоту окна и в этом случае добавить класс, чтобы изменить поведение изображения.

var img = document.querySelector("img"); // Add correct selector here 

if (img.height > window.innerHeight) { 

    img.classList.add("maxHeight"); 
} 

img { 
    width: 100%; 
    height: auto; 
} 
.maxHeight { 
    height: 100%; 
    width: auto; 
}