弹出窗口中的响应图像大小调整...高大的图像被截止

Question

所以，我有一个为画廊打开的弹出窗口。弹出窗口中图像的宽度设置为100％，拉伸以适合包含div的图像。并且，高度设置为自动，因此高度将根据宽度（相同的比率）调整大小。这对于宽图像非常有用......但对于高图像，高大的图像会在页面底部被截止。如果高度太高（并且图像被截止），那么我希望高度缩小到不同的大小，并调整宽度。我尝试了最大高度，但是这会使图像比率偏斜（缩小高度，但不会影响宽度）。任何人都有更好的解决方案吗？

您可以在此处查看问题： 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;
}