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
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 { .progressive-image-container {
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
max-height: 100vh;
margin: 0 auto; margin: 0 auto;
display: grid; /* Use grid for overlay */ display: grid; /* Use grid for overlay */
} }
.progressive-image { .progressive-image {
width: 100%; width: 100%;
height: auto; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100vh;
grid-area: 1 / 1; /* Stack images in same grid cell */ grid-area: 1 / 1; /* Stack images in same grid cell */
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
object-fit: contain; /* Maintain aspect ratio within bounds */
} }
.thumbnail { .thumbnail {
filter: blur(10px); filter: blur(10px);

8
public/styles.css
View File

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