Javascript 单击包含div时如何弹出img（图像库）？

我正在制作一个简单的图像库，并完成了总体结构，现在我只是想让Jquery正常工作，所以当点击Div时，里面的img会被放大到最大，并集中在屏幕上（就像大多数图像库一样）

这是我使用引导的HTML

<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div class = "pic_div"><img src="test.png" class = "pic"></div>
        <div class = "pic_div"><img src="test.png" class = "pic"></div>
        <div class = "pic_div"><img src="test.png"  class = "pic"></div>
        <div class = "pic_div"><img src="test.png"   class = "pic"></div>
    </div>
</div>

我不确定如何让图像从div中弹出，或者我必须加载相同的图像。我试图使添加新图片变得容易，因此我偏离了每个图像的特定命名

下面是包含div的CSS：

.pic_div{
width: 150px;
height: 150px;
margin: 25px;
overflow:hidden;
display:inline-block;

---

}

您可以从div组件中取出class属性并放入image组件，如下所示：

<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png"  class = "pic"></div>
        <div><img class = "pic_div" src="test.png"   class = "pic"></div>
    </div>
</div>

---

那应该可以了

以下是基本概念。CSS使用通常称为box方法（容器中的容器）。默认情况下，长方体或容器的宽度和高度不能大于其父容器的宽度和高度（因为长方体不适合）

要避免这种情况，可以将包含div的位置更改为绝对，即它相对于浏览器窗口而不是相对于其父容器定位

此外，与其使用jQuery插入内联样式，不如为大型图像切换a类集，还可以使用css3转换对其进行动画和修饰

这里有一个例子

var$pic_div=$（'.pic_div'）；
$pic_div.on（'click'，function（）{
$（此）.toggleClass（“活动”）；
});
.pic\u div img{
最大宽度：150px；
最大高度：150像素；
显示：块；
保证金：自动；
}
.pic_div.active img{
最大宽度：100%；
最大高度：100%；
}
(图片组){
宽度：150px；
高度：150像素；
利润率：25px；
溢出：隐藏；
显示：内联块；
背景色：白色；
}
.pic_div.active{
位置：绝对位置；
z指数：999999；
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
}
您还可以滚动您自己的灯箱：



var pd=$（'.pic_div'）；
pd.on（'单击'，函数（）{
var i=$（this.find（'img'）.clone（）；
$（'#lightbox'）.html（i）；
$（#lightbox img'）.css（{'width'：'100%，'height'：'auto'}）；
$（“#覆盖，#灯箱”）.fadeIn（）；
});
$（“#覆盖”）。单击（函数（）{
$（“#lightbox，#overlay”）.fadeOut（）；
$（'#lightbox'）.html（）；
});
.picu div{宽度：150px；高度：150px；边距：25px；溢出：隐藏；显示：内联块；}
#灯箱{
位置：绝对位置；
排名前10%；
左：20%；
宽度：60%；
身高：70%；
z指数：2；
显示：无；
}
#覆盖{位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；背景：黑色；不透明度：0.7；z索引：1；显示：无；}

您希望图像像fancybox插件一样出现在弹出窗口中，还是在屏幕上单击图像时显示得更大？我希望图像像fancybox插件一样弹出，虽然这是我第一次使用这个东西，所以我试着自己做，而不是使用plugins.jsfiddle或者其他任何东西。它只会填充div的原因是，当你在div中设置img时，100%指的是容器。因此，当您100%执行此操作时，将得到父元素的大小。为了使img在div之外流行，我会使用一个插件，比如在玩过之后，它工作得很好，但它似乎不能使图像在屏幕上居中。由于图像可能具有不同的宽度/高度，有没有办法确保灯箱始终位于页面中心。我试过边际：自动；但我没有那么幸运。
<div class = "row gallery">
    <div class = "col-md-12 gallery_row">
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png" class = "pic"></div>
        <div><img class = "pic_div" src="test.png"  class = "pic"></div>
        <div><img class = "pic_div" src="test.png"   class = "pic"></div>
    </div>
</div>