How do I get an image to display in its original size when I click on it?

Question

So I want to display images in my container, but the image resolution gets compromised. My image height and width can be random, but for alignment purposes, I used the same height and width for every image. So how can I show the original image if I click on that particular image that is some kind of screen modal/Imageview.

 .custom-class { overflow-y: auto; height: 350px; -webkit-overflow-scrolling: touch; }.Custcontent { position: relative; float: left; }

 <div class="row"> <div class="col-sm-5"> <div class="custom-class"> <span class="Custcontent"> <img src="https://picsum.photos/200/300" style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/200"style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/id/237/200/300"style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/seed/picsum/200/300"style="width: 2500px; height: 250px; border: thin solid black;"> </span> </div> </div> </div>

Images are loading dynamically, so I can't do that with id. Let me know if you find it difficult to understand my query.

https://jsfiddle.net/tusharmalap82/ykLpm2e6/8/

Answer 1

I made some assumptions and you need to think if you want to show the image heigh or wide. If you want original size, you will need to resize the container to fit

 // hmtl and css from https://sabe.io/tutorials/how-to-create-modal-popup-box const modal = document.querySelector(".modal"); const trigger = document.querySelector(".trigger"); const closeButton = document.querySelector(".close-button"); const modalImgContainer = document.getElementById("imgContainer"); const toggleModal = () => modal.classList.toggle("show-modal"); const windowOnClick = e => e.target === modal && toggleModal(); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); document.querySelector(".custom-class.Custcontent").addEventListener("click", e => { const tgt = e.target; if (tgt.matches("img")) { imgContainer.innerHTML = ""; const img = new Image(); img.src = tgt.src; img.style.height = "200px" imgContainer.append(img); toggleModal(); } });

 .custom-class { overflow-y: auto; height: 350px; -webkit-overflow-scrolling: touch; }.Custcontent { position: relative; float: left; }.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; }.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 24rem; border-radius: 0.5rem; text-align: center; }.close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; }.close-button:hover { background-color: darkgray; }.show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }

 <div class="row"> <div class="custom-class"> <span class="Custcontent"> <img src="https://picsum.photos/200/300" style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/200"style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/id/237/200/300"style="width: 2500px; height: 250px; border: thin solid black;"> <img src="https://picsum.photos/seed/picsum/200/300"style="width: 2500px; height: 250px; border: thin solid black;"> </span> </div> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <div id="imgContainer"></div> </div> </div>