フルスクリーンで画像が歪むのを防ぐ

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>