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

Question

因此，我有一个为画廊打开的弹出窗口。弹出窗口中图像的宽度设置为 100%，拉伸(stretch)以适合其包含的 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;
}