如何以模態方式垂直居中圖像？

Question

我有這種顯示圖像的模式。我希望手機上的圖像在中間（垂直）居中，沒有拉伸或任何東西，但無法實現它。

這裏是我的模式（用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

您需要添加CSS邏輯的圖像可垂直 移動設備上保持一致。

當前位置與頂部和翻譯會做邏輯。 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%); 
    } 
} 

下面是工作的代碼comaptible與移動設備。在移動設備上檢查此項。

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">