Better photo scaling without scroll in lightbox modal
This commit is contained in:
parent
80c4471017
commit
be9276f4c0
|
@ -46,9 +46,16 @@ img {
|
||||||
|
|
||||||
/* Photo modals in addition to Bulma .modal-content */
|
/* Photo modals in addition to Bulma .modal-content */
|
||||||
.photo-modal {
|
.photo-modal {
|
||||||
width: auto !important;
|
width: calc(100vw - 40px);
|
||||||
max-width: fit-content;
|
max-height: calc(100vh - 40px);
|
||||||
max-height: fit-content;
|
}
|
||||||
|
.photo-modal #detailImg {
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
}
|
||||||
|
.photo-modal img {
|
||||||
|
max-height: calc(100vh - 50px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom bulma tag colors */
|
/* Custom bulma tag colors */
|
||||||
|
|
|
@ -169,8 +169,12 @@
|
||||||
<div class="modal" id="detail-modal">
|
<div class="modal" id="detail-modal">
|
||||||
<div class="modal-background"></div>
|
<div class="modal-background"></div>
|
||||||
<div class="modal-content photo-modal">
|
<div class="modal-content photo-modal">
|
||||||
<div class="image is-fullwidth">
|
<!-- Notes: to get the image to always scale and fit on screen, it is made as a background image in CSS
|
||||||
<img id="detailImg">
|
on the detailImg div; but we don't have the image's minimum size here, so the hidden <img> inside
|
||||||
|
provides the size pushing to make it visible on screen, otherwise the divs are 0x0 pixels and nothing
|
||||||
|
would be visible. -->
|
||||||
|
<div id="detailImg">
|
||||||
|
<img style="visibility: hidden">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close is-large" aria-label="close"></button>
|
<button class="modal-close is-large" aria-label="close"></button>
|
||||||
|
@ -755,8 +759,10 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
function setModalImage(url) {
|
function setModalImage(url) {
|
||||||
let $modalImg = document.querySelector("#detailImg");
|
let $modalImg = document.querySelector("#detailImg"),
|
||||||
$modalImg.src = url;
|
$img = $modalImg.getElementsByTagName("img")[0];
|
||||||
|
$img.src = url;
|
||||||
|
$modalImg.style.backgroundImage = `url(${url})`;
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user