scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/card-width-fix (pull request #1369)

Browse Source 
feat(images): calculate width correct using aspect ratio

* feat(images): calculate width correct using aspect ratio


Approved-by: Erik Tiekstra
This commit is contained in:
Linus Flood
2025-02-19 06:29:22 +00:00
parent ba3ecedaee
commit c2b7d97ddd
3 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/TempDesignSystem/Card/index.tsx
View File

@@ -44,7 +44,9 @@ export default function Card({
imageWidth =
imageWidth ||
(backgroundImage?.dimensions
? backgroundImage.dimensions.aspectRatio * imageHeight
? backgroundImage.dimensions.aspectRatio >= 1
? backgroundImage.dimensions.aspectRatio * imageHeight
: imageHeight / backgroundImage.dimensions.aspectRatio
: 420)
return (

10
components/TempDesignSystem/TeaserCard/index.tsx
View File

@@ -25,6 +25,14 @@ export default function TeaserCard({
}: TeaserCardProps) {
const classNames = teaserCardVariants({ intent, alwaysStack, className })
const imageWidth =
image &&
Math.ceil(
image.dimensions.aspectRatio >= 1
? image.dimensions.aspectRatio * 200
: 200 / image.dimensions.aspectRatio
)
return (
<article className={classNames}>
{image && (
@@ -32,7 +40,7 @@ export default function TeaserCard({
src={image.url}
alt={image.meta?.alt || ""}
className={styles.image}
width={Math.ceil(image.dimensions.aspectRatio * 200)}
width={imageWidth}
height={200}
focalPoint={image.focalPoint}
/>