Javascript 将标题和图像放在从屏幕顶部向下滑动的居中div中

我想用HTML/CSS/jQuery制作一个图库。我有一堆缩略图，它们都代表不同大小和方向的不同图像。单击缩略图时，我希望图像从屏幕顶部向下滑动。图像应尽可能大，但仍适合窗口，考虑到边距等因素

在过去，我已经让所有这些正常工作。但是，现在我想在图片下面添加一个标题

我的解决办法是这样。我有一个固定的div容器，它的位置是top:-96%，bottom:100%。当单击缩略图时，jQuery将其移动到top:2%，bottom:2%

以前，我有一个包围图像的边框。现在我想让这个边框实际上成为div的一部分，这样边框就可以绕过标题，标题应该在图片下面，居中，还有图片

然而，我所做的一切都不起作用。图像将不适合视口，并且无论我将百分比更改为什么，都将始终为其最大大小

我完全迷路了，我不知道如何把这一切都解决。如果你需要代码，我可以给你，但正如我所说，它不工作。提前谢谢大家

编辑：添加代码

HTML:

JS：缩略图存储在一个对象数组中，其中包含它们的ID和源

for(let i in thumbnails){
       $(thumbnails[i].id).on("click",function(livingHell){
           return function(){
               $("#imgHover").attr("src",thumbnails[livingHell].src)
               $("#imgHoverCont").css("display","block");
               $("#commentHover").html(thumbnails[livingHell].comment);
               $("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
           }
       }(i));
   };

---

我对你的CSS做了一些修改 如果我理解了你的问题，它会像预期的那样工作，请看这里：

---

您好，通常在SO中显示您尝试过的内容，因此代码将是好的。听起来您需要将div中的

img

位置更改为

initial

，然后它将受到

固定的
div大小的影响。不幸的是，这仍然不起作用。对我来说，它在JSFIDLE上也不起作用。你能更具体一点吗？在小提琴中，当我按下“嘿”按钮时，一张图片以100%的宽度向下浮动，下面有一个以标题为中心的标题-这是为你发生的吗？这不是你想要的吗？也许我只是用错了JSFIDLE，但是当我调整查看窗口的大小时，即使在刷新页面后，图像也会显示错误。在我的网页上也不起作用。图像似乎总是以全尺寸显示，而不考虑容器的大小。我还希望它是100%宽度或高度，这取决于方向，这样它就可以在屏幕上显示，不管大小如何。我现在明白了——所以，首先，我对
#imgBg
做了一些修改，将
最大宽度设置为
100%
并将宽度设置为
1500px
（可以任意宽）-因此，它始终适用于宽度。至于让它响应（这就是你要问的）——我认为你必须使用
媒体查询
#imgHoverCont{
    text-align:center;
    position:fixed;
    left:2%;
    right:2%;
    top:-96%;
    bottom:100%;
}

#imgHover{
    display:block;
    height:100%;
    width:auto;
}

#imgBg{
    position: relative;
    display: inline-block;
    max-width:100%;
    max-height:100%;
}

#commentHover{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    color:black;
    background-color:white;
}

for(let i in thumbnails){
       $(thumbnails[i].id).on("click",function(livingHell){
           return function(){
               $("#imgHover").attr("src",thumbnails[livingHell].src)
               $("#imgHoverCont").css("display","block");
               $("#commentHover").html(thumbnails[livingHell].comment);
               $("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
           }
       }(i));
   };

#imgHoverCont{
    text-align:center;
    position:fixed;
    left:2%;
    right:2%;
    top:-96%;
    bottom:100%;
    width:100%; /*new rule*/
}

#imgHover{
    display:block;
    height:100%;
    width:100%;/*changed rule*/
}

#imgBg{
    position: relative;
    display: inline-block;
    max-width:100%;/*changed rule*/
    max-height:100%;
    width:1500px
}

#commentHover{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    color:black;
    background-color:white;
}