knight/analogGallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance responsive image handling in generateSite.js and styles.css. Updated CSS to ensure images maintain aspect ratio with object-fit, adjusted dimensions for better responsiveness, and improved loading behavior. This enhances visual presentation and user experience across the site.

Browse Source
This commit is contained in:
Knight 2024-12-28 11:59:35 -05:00
parent 87604711e5
commit c8c99fa66b
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
generateSite.js
View File

@ -55,15 +55,18 @@ async function generateSite() {
.progressive-image-container {
width: 100%;
max-width: 100vw;
max-height: 100vh;
margin: 0 auto;
display: grid; /* Use grid for overlay */
}
.progressive-image {
width: 100%;
height: auto;
height: 100%;
max-width: 100%;
max-height: 100vh;
grid-area: 1 / 1; /* Stack images in same grid cell */
transition: opacity 0.5s ease-in-out;
object-fit: contain; /* Maintain aspect ratio within bounds */
}
.thumbnail {
filter: blur(10px);

8
public/styles.css
View File

@ -14,23 +14,27 @@ body {
.image-container {
position: relative;
height: 100vh;
width: auto;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
img {
height: 100vh;
max-height: 100vh;
max-width: 100vw;
width: auto;
height: auto;
display: block;
position: relative;
object-fit: contain;
}
@media (max-aspect-ratio: 1/1) {
img {
height: auto;
width: 100vw;
max-height: 100vh;
}
}