Jquery 当另一个图像被放大时，在div中自动排列图像而不留下任何空白

我有一个分区，里面有同样大小的图片。 当我点击一个图像时，它会被放大到原来大小的300%。 我想做的是，我不想在我的图像容器div上留下任何空白。 对于左列中的图像，它可以正常工作，但当我单击左列以外的图像时，它会留下空白

这是缩放前的原始视图

我使用的代码是 Jquery

$(".light-box-items").click(function(){
            $("#"+zoomedImage).animate({"height":"200px" , "width":"25%"},400);
            $(this).animate({"height":"600px" , "width":"75%"},400);
            zoomedImage = this.id;
    });

css

---

你能做一把小提琴吗？当我点击一个放大的元素时，它不会变小…我尝试了不同的方法。但是没有运气。似乎您需要通过javascript处理单击事件时元素的定位（

只是一种方式）。
#light-box{
position:absolute;
right:-93%;
min-height:100%;
height:auto;
width:80%;
background-color:grey;}
.light-box-items
{
    height:200px;
    width:25%;
    background-color:red;
    float:left;
}