전체 화면에서 이미지 왜곡 방지

Question

이미지를 클릭하면 전체 화면으로 표시되지만 브라우저를 축소하거나 확장하면 이미지가 왜곡됩니다. 이것을 막는 가장 좋은 방법은 무엇입니까? 특정 높이에서 전체 화면 이미지를 중앙에 배치하는 방법을 찾지 못하는 것 같습니다.

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

.gallery_pics_holder { 
 
    border: px solid green; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 350px; 
 
    display: table; 
 
} 
 
.gallery_pics { 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    background-color: #3C0; 
 
} 
 
.gallery_pics img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics:hover { 
 
    cursor: pointer; 
 
} 
 
.gallery_pics.fullscreen img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.gallery_pics.fullscreen { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 90%; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color: #0FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<div class="gallery_pics_holder"> 
 

 
    <div class="gallery_pics"> 
 
    <img src="images/before1.jpg" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after1.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before2.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after2.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before3.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after3.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before4.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after4.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before5.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after5.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before6.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after6.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before7.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after7.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before8.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after8.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before9.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after9.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/before0.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header--> 
 
    <div class="gallery_pics"> 
 
    <img src="images/after0.jpg" width="300px" height="300px" alt=""> 
 
    </div> 
 
    <!--gallery_header-->

전체 화면 이미지

Answer 1

사용 width:auto는 :

.gallery_pics.fullscreen img { 
    width: auto; 
    height: 100%; 
} 

또한, 귀하의 jQuery 코드가 잘못되었습니다. 그것은해야한다 :

$(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 img { 
 
    width: auto; 
 
    height: 100%; 
 
} 
 
.gallery_pics.fullscreen { 
 
    z-index: 9999; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    height: 90%; 
 
    top: 5%; 
 
    left: 5%; 
 
    background-color: #0FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/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>