如何使用 Lightbox 正确调整和显示图片？

Question

我正在构建一个灯箱画廊，基于以下模板：https://www.w3schools.com/howto/howto_js_lightbox.asp

我在模态库中正确显示图片时遇到问题。我想让它们适合屏幕。

我有以下 div 构造：body > div#myModal2.modal > div.modal-content > div.mySlides2 > img

HTML：

<div id="myModal2" class="modal">
  <span class="close cursor" onclick="closeModal2()">&times;</span>
  <div class="modal-content">

    <div class="mySlides2">
      <div class="numbertext">1 / 6</div>
      <img src="images/wzory/1.jpg" style="width:100%">
    </div>

CSS：

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  
}


.mySlides2 {
  display: none;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  
  max-width: 80%;
  max-height: 100%;
  
}

编辑 .modal-content "max-width: 80%" 时长话短说，我可以毫无问题地更改模式（以及其中的图片）的大小，并使其适合屏幕大小。 但是编辑“最大高度”它不能正常工作。大图“太长”，不适合屏幕。

为什么“max-width: 80%”可以正常工作，而“max-height: 100%”却不行？

Answer 1

您的问题在Here之前已经得到解答

无论如何，您的情况有很多解决方案，您可以将图像视为背景图像并将背景大小设置为覆盖，这样它将覆盖模态，您也可以将模态内容设置为弹性框，方法是添加以它的风格display:flex 最后你可以设置 css 像这样自己成像

试试sn-p，祝你好运，

.modal {
  display: block;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;

}
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  height:100%;
  max-width:90%;
  max-height:100%;
}
.modal-content > img {
 height:100%;
 width:auto;
}

<div class="modal">
  <div class="modal-content">
      <img src="https://i.pinimg.com/originals/54/84/e2/5484e289c5af5c3414a30cb14a768ea8.jpg">
</div>
</div>