javascript - CSS 和 JS 多图像模态

Question

我已经为自己构建了一个 CSS/JS 图像模式/灯箱(正如其他人之前所做的那样，它基于 W3Schools 教程 - http://www.w3schools.com/howto/howto_css_modal_images.asp)但是我允许我在一个页面上重复使用相同模式的多个图像div，它允许我按容器调整图像大小，然后在单击时显示全尺寸图像。

问题 1 - 图像未在模式中居中(现已修复)

问题 2 - 图像按预期弹出，直到我添加缩放动画过渡。然后图像在页面上的一个位置(向右和中心下方)放大，然后弹出到模态中间的正确位置。我觉得我错过了一些非常简单的定位？ 谁能帮我找到一个只使用 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"
	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.container1 包裹在一个 div 中并 text-align:center 它

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

CSS

.center{
  text-align:center;
}

第四张图片的高度小于其他图片的高度，因此不成比例。

演示:https://jsfiddle.net/ypzfawt8/