图库大拇指不会调整窗口视口大小

Question

我有这个图片库Clik here to see。

当我调整窗口视口的大小时，我需要改变拇指的大小，但正如你所看到的，我不能这样做。

我设置了max-height＆amp; css的最大宽度为100％，但没有，图像尺寸不能正常工作。

我在哪里错了代码？

这里你是我的css：

ul.gallery {
list-style: none;
padding: 0;
}

ul.gallery li a:hover{
opacity: 0.6;
}

ul.gallery li{
display: inline;
margin: 5px 5px;

}

li.gallery_item img{
    max-width:100%;
    max-height:100%;    
}

Answer 1

您将图像的最大高度/宽度设置为100％，这意味着最大的图像可能是完整的视口区域。当图像小于图像时，这对于调整图像大小没有任何作用。

li.gallery_item img {
    max-width: 100%;
    max-height: 100%;
    width: 23%;
    height: auto;
}

将百分比宽度和高度添加到自动意味着您的图像将缩放以适合一行中的四行。

试验一下，以获得您所追求的确切效果。