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-modal {
|
||||
width: auto !important;
|
||||
max-width: fit-content;
|
||||
max-height: fit-content;
|
||||
width: calc(100vw - 40px);
|
||||
max-height: calc(100vh - 40px);
|
||||
}
|
||||
.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 */
|
||||
|
|
|
@ -169,8 +169,12 @@
|
|||
<div class="modal" id="detail-modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content photo-modal">
|
||||
<div class="image is-fullwidth">
|
||||
<img id="detailImg">
|
||||
<!-- Notes: to get the image to always scale and fit on screen, it is made as a background image in CSS
|
||||
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>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
|
@ -755,8 +759,10 @@
|
|||
});
|
||||
});
|
||||
function setModalImage(url) {
|
||||
let $modalImg = document.querySelector("#detailImg");
|
||||
$modalImg.src = url;
|
||||
let $modalImg = document.querySelector("#detailImg"),
|
||||
$img = $modalImg.getElementsByTagName("img")[0];
|
||||
$img.src = url;
|
||||
$modalImg.style.backgroundImage = `url(${url})`;
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue
Block a user