Experimental Photo Gallery - Fill Browser Window
<style>
img.thumb {
cursor: zoom-in;
}
img.full {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 95%;
max-height: 95%;
visibility: hidden;
opacity: 0;
border: .7vmin solid gray;
transition: 0.85s linear;
}
img.thumb:focus + img.full {
visibility: visible;
opacity: 1;
z-index:200;
cursor: zoom-out;
}
</style>
Approach
• Used the Acorn approach for generating the Thumb images, but set a placeholder w & h preset. • Generated the mobile variant Thumbs through ‘share with variants’, changed id’s and placeholders w & h.Observations
• Using “vh” or “dvh” measurements works for Windows, but fails for Android (maybe iOS too); changed to % measurement which resolves the Android issue (maybe iOS too). • Anytime you make an adjustment to the thumb (placeholder) you have to reset its height to that specified in the placeholder code. • Could not find a way to use Scale-to-fit-Width (even with changing the measurement units).
Using the vh or dvh measurement
Using % to set height and width