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代码是错误的。它应该是：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在全屏模式下防止图像扭曲

1 个答案: