單擊圖像時如何使圖像以其原始大小顯示？

Question

所以我想在我的容器中顯示圖像，但圖像分辨率會受到影響。 我的圖片高度和寬度可以是隨機的，但出於 alignment 的目的，我為每張圖片使用了相同的高度和寬度。 那么，如果我點擊某種屏幕模態/圖像視圖的特定圖像，我該如何顯示原始圖像。

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

圖片是動態加載的，所以我不能用 id 來加載。 如果您覺得難以理解我的查詢，請告訴我。

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

Answer 1

我做了一些假設，你需要考慮是要顯示圖像的高度還是寬度。 如果您想要原始大小，則需要調整容器大小以適合

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