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

fix: make images responsive

Browse Source
This commit is contained in:
Christel Westerberg
2024-02-13 15:18:59 +01:00
parent 5689e68610
commit 4b193541b2
6 changed files with 50 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/Current/Hero/hero.module.css
View File

@@ -1,4 +1,27 @@
.wrapper {
z-index: 0;
}
.picture {
visibility: visible;
opacity: 1;
transition: opacity 400ms ease-in-out 0s;
transform: translate(-50%, -50%) !important;
}
.heroImage {
object-fit: cover;
object-fit: contain;
width: 100%;
}
height: auto;
max-height: 600px;
min-height: 100px;
object-fit: cover;
object-position: center;
aspect-ratio: 1/1;
}
@media screen and (min-width: 740px) {
.heroImage {
aspect-ratio: auto;
}
}

56
components/Current/Hero/index.tsx
View File

@@ -1,5 +1,3 @@
"use client"
import Image from "@/components/Image"
import styles from "./hero.module.css"
@@ -8,47 +6,19 @@ import type { HeroProps } from "@/types/components/current/hero"
export default function Hero({ images }: HeroProps) {
return (
<div className="hero-content-overlay hero-content-widget">
<div className="hero-content-overlay__img-container">
<div className="hero-fixed hero-fixed--deemphasized" style={{ marginTop: "0px" }}>
<div className="hero" style={{ top: "113px" }}>
<div className="hero__img-container">
<div id="full-width-slider" className="royalSlider royalSlider--hero rsDefault rsHor rsFade rsWithBullets" data-js="hero-slider" tabIndex={0} aria-label="Carousel. Change slides with keyboard left and right arrows." style={{ touchAction: "pan-y" }}>
<div className="rsOverflow" style={{ width: "1555px", height: "650px" }}>
<div className="rsContainer">
<div style={{ zIndex: 0 }} className="rsSlide ">
<picture style={{ visibility: "visible", opacity: 1, transition: "opacity 400ms ease-in-out 0s" }}>
{images.map(({ node: image }) => (
<Image
alt={image.title}
className={`rsImg-x slider-plchldr ${styles.heroImage}`}
data-aspectratio="1.50"
height={image.dimension.height}
key={image.title}
src={image.url}
width={image.dimension.width}
/>
))}
</picture>
</div>
</div>
<div className="rsArrow rsArrowLeft" style={{ display: "none" }}>
<div className="rsArrowIcn" tabIndex={0} />
</div>
<div className="rsArrow rsArrowRight" style={{ display: "none" }}>
<div className="rsArrowIcn" tabIndex={0} />
</div>
</div>
<div className="rsNav rsBullets">
<div className="rsNavItem rsBullet rsNavSelected">
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.wrapper} aria-label="Hero" tabIndex={0}>
<picture className={styles.picture}>
{images.map(({ node: image }) => (
<Image
alt={image.title}
className={styles.heroImage}
height={image.dimension.height}
key={image.title}
src={image.url}
width={image.dimension.width}
/>
))}
</picture>
</div>
)
}