andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Try fixing profile photo sizing

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-22 08:36:35 +02:00
parent 66ea93f0fa
commit 0c8abbabbd
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
2 changed files with 6 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/data/portfolio.ts
View file

@ -30,6 +30,7 @@ export const create = (): Array<PageElement> => [
photo: Image({
imageWebP: meWebP,
alt: `a picture of me`,
imageScreenRatio: 0.3,
}),
about: [
`

9
src/page/basics/image/image.html.ts
View file

@ -8,11 +8,13 @@ export const Image = ({
alt,
container = false,
isIgnoredByImageViewer = false,
imageScreenRatio = 0.8,
}: {
imageWebP: ResponsiveImage;
alt: string;
container?: boolean;
isIgnoredByImageViewer?: boolean;
imageScreenRatio?: number;
}): html => `
${
container
@ -28,7 +30,7 @@ export const Image = ({
<picture loading="lazy">
<source
srcset="${imageWebP.srcSet}"
sizes="${getSizes(imageWebP)}"
sizes="${getSizes(imageWebP, imageScreenRatio)}"
type="image/webp"
/>
<img
@ -45,9 +47,8 @@ export const Image = ({
${container ? `</div>` : ''}
`;
const IMAGE_SCREEN_RATIO = 0.8;
const getSizes = (image: ResponsiveImage): string =>
const getSizes = (image: ResponsiveImage, imageScreenRatio: number): string =>
image.images
.slice(0, -1)
.map((d) => `(max-width: ${d.width / IMAGE_SCREEN_RATIO}px) ${d.width}px,`)
.map((d) => `(max-width: ${d.width / imageScreenRatio}px) ${d.width}px,`)
.join('\n') + `\n${last(image.images)!.width}px`;