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

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>
)
}