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

Merged in fix/teasercard-image-fill (pull request #1425)

Browse Source 
feat:teasercard - image fill fix

* feat:teasercard - image fill fix


Approved-by: Erik Tiekstra
This commit is contained in:
Linus Flood
2025-02-27 10:12:29 +00:00
parent 58b2957b81
commit f59090936e
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
View File

@@ -25,25 +25,18 @@ export default function TeaserCard({
}: TeaserCardProps) { }: TeaserCardProps) {
const classNames = teaserCardVariants({ intent, alwaysStack, className }) const classNames = teaserCardVariants({ intent, alwaysStack, className })
const imageWidth =
image &&
Math.ceil(
image.dimensions.aspectRatio >= 1
? image.dimensions.aspectRatio * 200
: 200 / image.dimensions.aspectRatio
)
return ( return (
<article className={classNames}> <article className={classNames}>
{image && ( {image && (
<Image <div className={styles.imageContainer}>
src={image.url} <Image
alt={image.meta?.alt || ""} src={image.url}
className={styles.image} alt={image.meta?.alt || ""}
width={imageWidth} className={styles.image}
height={200} focalPoint={image.focalPoint}
focalPoint={image.focalPoint} fill
/> />
</div>
)} )}
<div className={styles.content}> <div className={styles.content}>
<Subtitle textAlign="left" type="two" color="black"> <Subtitle textAlign="left" type="two" color="black">

6
apps/scandic-web/components/TempDesignSystem/TeaserCard/teaserCard.module.css
View File

@@ -5,6 +5,12 @@
overflow: hidden; overflow: hidden;
} }
.imageContainer {
width: 100%;
height: 200px;
position: relative;
}
.default { .default {
background-color: var(--Base-Surface-Subtle-Normal); background-color: var(--Base-Surface-Subtle-Normal);
} }