ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

height of image in post/index.vue is calculated correctly. Why is this necessary?

Browse Source
This commit is contained in:
Moriz Wahl 2021-02-05 14:19:47 +01:00
parent 664d3d2c42
commit 80e296604d
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/pages/post/_id/_slug/index.vue
View File

@ -176,13 +176,15 @@ export default {
/* Return false when image property is not present or is not a number /* Return false when image property is not present or is not a number
so no unnecessary css variables are set. so no unnecessary css variables are set.
*/ */
if (!this.post.image || typeof this.post.image.aspectRatio !== 'number') return false
if (!this.post.image || typeof this.post.image.aspectRatio !== 'number') return false
/* Return the aspect ratio as a css variable. Later to be used when calculating /* Return the aspect ratio as a css variable. Later to be used when calculating
the height with respect to the width. the height with respect to the width.
Why is this correction necessary?
*/ */
return { return {
'--hero-image-aspect-ratio': 1 / this.post.image.aspectRatio, '--hero-image-aspect-ratio': 1.0 / this.post.image.aspectRatio,
'--hero-image-correction': 1.0 / this.post.image.aspectRatio * 48.0 + 'px',
} }
}, },
}, },
@ -258,8 +260,8 @@ export default {
hero image aspect ratio) before the hero image loads so hero image aspect ratio) before the hero image loads so
the autoscroll works correctly when following a comment link. the autoscroll works correctly when following a comment link.
*/ */
padding-top: calc(var(--hero-image-aspect-ratio) * 100%);
padding-top: calc(var(--hero-image-aspect-ratio) * 100% + var(--hero-image-correction));
/* Letting the image fill the container, since the container /* Letting the image fill the container, since the container
is the one determining height is the one determining height
*/ */