キャプションと画像を画面上部からスライドする中央のdivの内側に置く

Question

HTML/CSS/jQueryでギャラリーを作成したいと思います。さまざまなサイズと方向の異なるイメージを表すサムネイルがたくさんあります。サムネイルをクリックすると、画像が画面の上からスライドします。画像は、可能な限り大きくなければならないが、マージンなどを考慮して、ウィンドウにフィットしなければならない。

私はこのすべてを過去に正しく動作させるようにしました。しかし、今では画像の下にキャプションを追加したいと思います。

私の解決策はこれでした。 -96％とbottom：100％サムネイルをクリックすると、jQueryはそれを上：2％と下：2％に移動します。

以前は境界線を持っていましたイメージを囲んだ。今では、その境界線を実際にdivの一部にしたいので、境界線がイメージの下にあり、中央にくるべきキャプションの周りを回って、イメージを描くことができます。

私がやっていることは何もできません。画像はビューポートに収まらず、パーセント値を変更しても常に最大サイズになります。

私は完全に迷っています。私はこれをどのように機能させるか考えていません。コードが必要な場合、私はあなたにそれを与えることができますが、私が言ったように、それは動作しません。あらかじめありがとうございます。

EDIT：追加コード

HTML：

<div id=imgHoverCont> 
    <div id=imgBg> 
     <img id=imgHover src="" alt=""> 
     <div id=commentHover></div> 
    </div> 
</div> 

CSS：

#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; 
} 

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)); 
    }; 

Answer 1

私は私はあなたの質問を理解している場合、それは予想されるように、ここを見て動作しますあなたのCSS にいくつかの変更を加えました：https://jsfiddle.net/cratgjks/

#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; 
}