Css 图库拇指唐'；t使用windows视口调整大小

我有这个图像库

当我调整窗口的视口大小时，我需要更改缩略图的大小，但正如你所看到的，我不能这样做

我将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%;    
}

---

您正在将图像的最大高度/宽度设置为100%，这意味着图像的最大高度/宽度可能是整个视口区域。当图像小于该值时，这不会调整图像大小

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

将宽度和高度百分比添加到“自动”意味着您的图像将缩放到一行四个

用这个做实验，得到你想要的确切效果