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

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;
}