如何以模态方式垂直居中图像？

我有这种显示图像的模式。我希望手机上的图像在中间（垂直）居中，没有拉伸或任何东西，但无法实现它。如何以模态方式垂直居中图像？

这里是我的模式（用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/

来源

2017-04-27 zzbil

请分享工作代码 –

@SahilDhir https://jsfiddle.net/dccLtfeh/ – zzbil

事情是这样的：https://jsfiddle.net/4ha9jyap/？ –

您需要添加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">

来源

2017-04-27 10:45:08

嗨。你的答案很好，但是。打开图像时，首先在底部打开，然后跳到中央。有没有解决这个问题的方法？ – zzbil

更新了我的代码，现在不会产生任何问题 –

如何以模态方式垂直居中图像？

回答

相关问题