將圖像置於全屏固定格內

Question

我有一些縮略圖圖像，當您點擊每個圖像時，它將使用JavaScript觸發全屏覆蓋，圖像相同但內部放大版本。

當瀏覽器窗口大小發生變化時，我需要圖像水平和垂直居中，並在黑色疊加層內自動調整大小。以下是我試過的打擊：

$(document).ready(function() { 
 
    $('.gallery_pics').click(function(e) { 
 
    $(this).toggleClass('fullscreen'); 
 
    }); 
 
});

.gallery_pics_holder { 
 
    border: px solid green; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 350px; 
 
    display: table; 
 
} 
 
.gallery_pics { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    background-color: #3C0; 
 
} 
 
.gallery_pics img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics:hover { 
 
    cursor: pointer; 
 
} 
 
.gallery_pics.fullscreen { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    width: 95%; 
 
    height: 95%; 
 
    top: 2%; 
 
    left: 3%; 
 
    background-color: #000; 
 
    display: inline-table; 
 
} 
 
.gallery_pics.fullscreen img { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    max-width: 1099px; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="gallery_pics_holder"> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/1"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/2"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/3"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/4"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/5"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/6"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/7"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/8"> 
 
    </div> 
 
    <div class="gallery_pics"> 
 
    <img src="http://lorempixel.com/800/800/sports/9"> 
 
    </div> 
 
</div>

Answer 1

可以這樣設置全屏容器：

.gallery_pics.fullscreen { 
    z-index: 9999; 
    position: fixed; 
    margin: auto; 
    width: 95%; 
    height: 95%; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background-color: #000; 
} 

而且使用transform爲中心的圖像：

.gallery_pics.fullscreen img { 
    max-width: 90%; 
    max-height: 90%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

jsFiddle