Carousel to be the same size as image

Question

I'm trying to create a gallery when an image is clicked on it brings up a carousel.

I'm almost there, but the image is huge when full size so I need it to be smaller however it leaves a background on the carousel.

 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 = "inline"; dots[slideIndex - 1].className += " active"; captionText.innerHTML = dots[slideIndex - 1].alt; }

 body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; }.row>.column { padding: 0 8px; }.row:after { content: ""; display: table; clear: both; }.column { float: left; width: 25%; background-color: black; } /* The Modal (background) */.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: auto; height: 100%; overflow: auto; background-color: black; } /* Modal Content */.modal-content { position: relative; background-color: red; margin: auto; padding: 0; width: auto; } /* The Close Button */.close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }.mySlides { display: none; }.cursor { cursor: pointer; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; }.caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; }.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; }.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

 <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="https://i.imgur.com/AD3MbBi.jpg" style="width:300px" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://i.imgur.com/M19Z4BO.png" style="width:300px" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://i.imgur.com/9O8BzsM.jpg" style="width:300px" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://i.imgur.com/UJTT5GK.jpg" style="width:300px" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div> <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://i.imgur.com/AD3MbBi.jpg" style="width:300px"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://i.imgur.com/M19Z4BO.png" style="width:300px"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://i.imgur.com/9O8BzsM.jpg" style="width:300px"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://i.imgur.com/UJTT5GK.jpg" style="width:300px"> </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 cursor" src="../window/img/img1.png" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="../window/img/img2.png" style="width:100%" onclick="currentSlide(2)" alt="Snow"> </div> <div class="column"> <img class="demo cursor" src="../window/img/img3.png" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="../window/img/img4.png" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"> </div> </div> </div>

Image of what happens: https://imgur.com/lipg9nD

As you can see in the image, the photo isn't within the next/previous arrows and there's a lot of empty space (red) when it should just shrink/grow to the size of the image.

Thanks in advance for any help.

Answer 1

Add this to your CSS style:

 .modal-content.mySlides img{ display:block; margin:auto; }

It will center the image. Further move <a class="prev"> before <div class="mySlides"> to place it on left-margin.