How to auto correct images size in this lightbox?

Question

I'm trying to make this lightbox work on my website, but the images are not being displayed with their original sizes, as you can see here (Click on "Galeria de fotos"). How can I write the following codes to correct this issue?

 function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } 

 .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 33.3%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } 

 <div role="tabpanel" class="tab-pane" id="messages"> <div class="trip-tab-gallery"> <ul> <div class="column"> <li><img src="images/tab-gallery-img-1.jpg" onclick="openModalhttps://s30.postimg.org/rxspwis5p/tab_gallery_img_1.jpgover-shadow"> </li> </div> <div class="column"> <li><img src="]https://s30.postimg.org/5n4uwjuvh/tab_gallery_img_2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow"> </li> </div> <div class="column"> <li><img src="https://s30.postimg.org/h0vzlhurx/tab_gallery_img_3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow"> </li> </div> <div class="column"> <li><img src="https://s30.postimg.org/eku67ncp9/tab_gallery_img_4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow"> </li> </div> </ul> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://s30.postimg.org/rxspwis5p/tab_gallery_img_1.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="]https://s30.postimg.org/5n4uwjuvh/tab_gallery_img_2.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://s30.postimg.org/h0vzlhurx/tab_gallery_img_3.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://s30.postimg.org/eku67ncp9/tab_gallery_img_4.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo" src="https://s30.postimg.org/rxspwis5p/tab_gallery_img_1.jpg" onclick="currentSlide(1)" alt="Nature"> </div> <div class="column"> <img class="demo" src="]https://s30.postimg.org/5n4uwjuvh/tab_gallery_img_2.jpg" onclick="currentSlide(2)" alt="Trolltunga"> </div> <div class="column"> <img class="demo" src="https://s30.postimg.org/h0vzlhurx/tab_gallery_img_3.jpg" onclick="currentSlide(3)" alt="Mountains"> </div> <div class="column"> <img class="demo" src="https://s30.postimg.org/eku67ncp9/tab_gallery_img_4.jpg" onclick="currentSlide(4)" alt="Lights"> </div> </div> </div> </div> </div> 

Answer 1

I see that on all of the images, you have a width of 100%:

<img src="https://s30.postimg.org/5n4uwjuvh/tab_gallery_img_2.jpg" style="width:100%">

Setting the width to 100% is forcing the image to expand to the size of the container. Changing this to max-width should fix that issue while also making sure the image doesn't go past the container.

<img src="https://s30.postimg.org/5n4uwjuvh/tab_gallery_img_2.jpg" style="max-width:100%">

After that, you can look into centering the image and making it look nice when it's small.

Side note: I noticed on some of the image URLs, there's a [ , I'm guessing it's a typo?

UPDATE: To get the images aligned to the center and the background "removed":

Add the following CSS:

.mySlides{
    background: black;
    text-align: center;
}

This'll set the background to black so that it won't look bad and align the picture to the center.