Aspect ratio and fetch priority fix
This commit is contained in:
@@ -72,12 +72,14 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item {
|
.gallery-item {
|
||||||
|
aspect-ratio: 3/2;
|
||||||
margin: 0 0 1rem;
|
margin: 0 0 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-item img {
|
.gallery-item img {
|
||||||
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|||||||
@@ -64,10 +64,10 @@ const createPicture = (item) => {
|
|||||||
const img = document.createElement('img');
|
const img = document.createElement('img');
|
||||||
img.src = `assets/media/thumbnail/${item.name}.webp`;
|
img.src = `assets/media/thumbnail/${item.name}.webp`;
|
||||||
img.alt = item.alt.replace(/[‘’]/g, '');
|
img.alt = item.alt.replace(/[‘’]/g, '');
|
||||||
img.height = item.height || 300;
|
img.height = item.height || undefined;
|
||||||
img.width = item.width || 300;
|
img.width = item.width || undefined;
|
||||||
img.loading = item.loading || 'lazy';
|
img.loading = item.loading || 'lazy';
|
||||||
img.fetchpriority = item.fetchpriority || undefined;
|
img.fetchPriority = item.fetchpriority || undefined;
|
||||||
pic.appendChild(img);
|
pic.appendChild(img);
|
||||||
return pic;
|
return pic;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user