CSSとJSのマルチ画像モード

Question

私は自分自身でCSS/JS画像のモーダル/ライトボックスを作成しました（これまでのように、W3Schoolチュートリアル - http://www.w3schools.com/howto/howto_css_modal_images.aspに基づいています）。同じmodal divを再利用すると、コンテナでイメージのサイズを変更し、クリックするとフルサイズのイメージを表示できます。

が問題1 - 画像はモーダルでセンタリングされていない（現在は固定）

発行2 - 意図したとおり、私はズームアニメーション遷移を追加するまで画像がポップアップ。イメージはページ上の1つの位置（右と中央の下）でズームし、モーダルの途中で正しい位置にポップします。私はポジショニングで本当にシンプルなものが欠けているような気がしますか？ CSSとJavascriptだけで簡単な解決策を見つけられる人はいますか？全体的にはるかにエレガントなソリューションを私に指摘してください。

https://codepen.io/r3dg3cko/pen/ZLryQG

function onClick(element) { 
 
    document.getElementById("img01").src = element.src; 
 
    document.getElementById("modal01").style.display = "block"; 
 
}

.modal { 
 
z-index:1; 
 
display:none; 
 
padding-top:10px; 
 
position:fixed; 
 
left:0; 
 
top:0; 
 
width:100%; 
 
height:100%; 
 
overflow:auto; 
 
background-color:rgb(0,0,0); 
 
background-color:rgba(0,0,0,0.8) 
 
} 
 

 
.modal-content{ 
 
margin: auto; 
 
display: block; 
 
max-width: 50%; 
 
} 
 

 

 
.modal-hover-opacity { 
 
opacity:1; 
 
filter:alpha(opacity=100); 
 
-webkit-backface-visibility:hidden 
 
} 
 

 
.modal-hover-opacity:hover { 
 
opacity:0.60; 
 
filter:alpha(opacity=60); 
 
-webkit-backface-visibility:hidden 
 
} 
 

 

 
.close { 
 
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white 
 
} 
 
.container1 { 
 
width:200px; 
 
display:inline-block; 
 
} 
 
.modal-content, #caption {  
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
} 
 

 

 
@-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
} 
 

 
@keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
}

<div class="container1"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" 
 
\t onclick="onClick(this)" class="modal-hover-opacity"> 
 
    </div> 
 
    <div class="container1"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" 
 
    onclick="onClick(this)" class="modal-hover-opacity"> 
 
    </div> 
 

 
    <div class="container1"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg" style="max-width:100%;cursor:pointer" 
 
    onclick="onClick(this)" class="modal-hover-opacity"> 
 
    </div> 
 

 
    <div class="container1"> 
 
    <img src="http://www.filmosphere.com/wp-content/uploads/2013/04/Iron-Man-3-affiche1-300x400.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity"> 
 
    </div> 
 

 

 
<div id="modal01" class="modal" onclick="this.style.display='none'"> 
 
    <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 
    <div class="modal-content"> 
 
    <img id="img01" style="max-width:100%"> 
 
    </div> 
 
</div>

おかげ - ロブ

Answer 1

ラップのdiv内のすべてのあなたのdiv.container1とtext-align:centerそれ

<div class="center"> 
...//div.container1 
</div 

CSS

.center{ 
    text-align:center; 
} 

4番目の画像の高さは他の画像の高さよりも小さいため、それは比例していません。

デモ：https://jsfiddle.net/ypzfawt8/