javascript - 如何在模态中垂直居中图像？

Question

我有一个显示图像的模式。我希望手机上的图像能够在中间(垂直)居中，而不拉伸(stretch)它或任何东西，但无法实现。

这是我的模式(使用显示此模式的 JavaScript):

var modal = document.getElementById('imgmodal');
var img = document.getElementById('picture');
var modalImg = document.getElementById("img");
var download = document.getElementById('download-link');

img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  download.href = this.src;
}

var span = document.getElementById("close");
span.onclick = function() { 
  modal.style.display = "none";
}

/* exam_img */
#imgmodal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 80px; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  overflow: auto;
  background-color: rgb(0,0,0); /* Black w/ opacity */
  transition: 0.3s;
}

/* Modal Content (image) */
.content {
  margin: auto;
  display: block;
  height: 90%;
}

/* Add Animation */
.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)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 768px){
  .content { /* I want image to be vertically centered on smaller screens)*/
    width: 100%;
    max-height: 90%;
    height: auto;
  }
  #close {
    top: 2px;
    font-size: 40px;
  }
  #imgmodal {
    padding-top: 50px;
  }
  #caption {
    top: -1px;
  }
}

<li class="exam_li">
  <img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img">
</li>

<div id="imgmodal">
  <div id="caption">
    <a id="download-link" download>
      <span class="glyphicon glyphicon-download"></span>
      <a id="download-link" download></a>
   </div>
  <span id="close">&times;</span>
  <img class="content" id="img">
</div>

提前谢谢您! “工作”代码在这里:https://jsfiddle.net/dccLtfeh/

Answer 1

You need to add a css logic for the image to be vertically align on mobile device.

发布与顶部和翻译将执行逻辑。 Postion:relative 与 top:50% 一起使用，这将使图像从顶部移动 50%，然后 transform:translateY (-50%);将其向上移动 25%，使其垂直居中。

@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 25px);
    top: -moz-calc(50% - 25px);
    top: -webkit-calc(50% - 25px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
}

Here is the working code comaptible with mobile device. Check this on mobile device.

var modal = document.getElementById('imgmodal');
var img = document.getElementById('picture');
var modalImg = document.getElementById("img");
var download = document.getElementById('download-link');
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  download.href = this.src;
}
var span = document.getElementById("close");
span.onclick = function() {
  modal.style.display = "none";
}

.exam-img:hover {
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
}


/* exam_img */

#imgmodal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  overflow: auto;
  background-color: rgb(0, 0, 0);
  /* Black w/ opacity */
  transition: 0.3s;
}


/* Modal Content (image) */

.content {
  margin: auto;
  display: block;
  height: 90%;
}


/* Caption of Modal Image */

#caption {
  text-align: center;
  color: #ccc;
  position: absolute;
  top: 15px;
  left: 35px;
  font-size: 40px;
  margin-top: 0;
}


/* Add Animation */

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


/* The Close Button */

#close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: 100;
  transition: 0.3s;
}

#close:hover,
#close:focus {
  color: #989898;
  text-decoration: none;
  cursor: pointer;
}

#download-link {
  font-size: 25px;
  color: #f1f1f1;
  font-weight: normal;
  text-decoration: none;
  transition: 0.2s;
  padding: 10px;
}

#download-link:hover {
  color: #989898;
}


/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
    height: auto;
    position: relative;
    top: calc(50% - 25px);
    top: -moz-calc(50% - 25px);
    top: -webkit-calc(50% - 25px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
  }
  #close {
    top: 2px;
    font-size: 40px;
  }
  #imgmodal {
    padding-top: 50px;
  }
  #caption {
    top: -1px;
  }
  
  @-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0) translateY(-50%);
  }
  to {
    -webkit-transform: scale(1) translateY(-50%);
  }
}

@keyframes zoom {
  from {
    transform: scale(0) translateY(-50%); 
  }
  to {
    transform: scale(1) translateY(-50%);
  }
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="exam_li"><img id="picture" src="https://www.w3schools.com/css/img_fjords.jpg" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img"></li>

<div id="imgmodal">
  <div id="caption"><a id="download-link" download><span class="glyphicon glyphicon-download"></span><a id="download-link" download></a></div>
  <span id="close">&times;</span>
  <img class="content" id="img">