How to properly fit & display pictures with Lightbox?

Question

I'm building a Lightbox gallery, based on following template: https://www.w3schools.com/howto/howto_js_lightbox.asp

I've got a problem with properly displaying pictures in Modal Gallery. I want to fit them to the screen.

I've got a following div construction: 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%;
  
}

Long story short when editing .modal-content "max-width: 80%" I can change the size of modal (and the picture in it) without any problem and fit it properly to the screen size. But editing "max-height" it's not working properly. The big pictures are "too long" and they do not fit the screen.

Why "max-width: 80%" works perfectly fine, but "max-height: 100%" does not?

Does this answer your question? [CSS: How can I set image size relative to parent height?](https://stackoverflow.com/questions/19192892/css-how-can-i-set-image-size-relative-to-parent-height) — E_net4, Dec 31 '20 at 23:34

score 0 · Answer 1 · answered Dec 31 '20 at 23:31

your question has been answered before Here

anyway there is many solutions for your case, you can treat the images as background-image and set background-size to cover so it will cover the modal also u can set the modal-content to be a flex box, by adding to it's style display:flex and finally you can set css to image it self like this

try the snippet, and good luck,

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

How to properly fit & display pictures with Lightbox?

1 Answers1