diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx
index fb2aa6ed7..7d87cff24 100644
--- a/src/components/image/SanityImage.tsx
+++ b/src/components/image/SanityImage.tsx
@@ -39,9 +39,11 @@ const useNextSanityGlobalImage = (
const SanityAssetImage = ({
image,
imageProps,
+ objectFit = "cover",
}: {
image: IImage;
imageProps?: UseNextSanityImageProps;
+ objectFit?: "cover" | "none";
}) => {
const objectPosition = image.hotspot
? `${image.hotspot.x * 100}% ${image.hotspot.y * 100}%`
@@ -56,12 +58,16 @@ const SanityAssetImage = ({
width={imageProps.width}
height={imageProps.height}
blurDataURL={image.metadata?.lqip}
- style={{
- objectFit: "cover",
- objectPosition,
- maxWidth: "100%",
- maxHeight: "100%",
- }}
+ style={
+ objectFit === "none"
+ ? {}
+ : {
+ objectFit: "cover",
+ objectPosition,
+ maxWidth: "100%",
+ maxHeight: "100%",
+ }
+ }
/>
);
};
@@ -76,24 +82,44 @@ export function SanitySharedImage({ image }: { image: IImage }) {
return ;
}
-function SanityGlobalImage({ image }: { image: IImage }) {
+function SanityGlobalImage({
+ image,
+ objectFit = "cover",
+}: {
+ image: IImage;
+ objectFit?: "cover" | "none";
+}) {
const imageProps = useNextSanityGlobalImage(image);
return (
-
+
);
}
-export function SanityImage({ image }: { image: IImage }) {
+export function SanityImage({
+ image,
+ objectFit = "cover",
+}: {
+ image: IImage;
+ objectFit?: "cover" | "none";
+}) {
if (image?.src) {
return (
);
}
- return ;
+ return ;
}
diff --git a/src/components/sections/image-split/ImageSplit.tsx b/src/components/sections/image-split/ImageSplit.tsx
index f07cd3477..6cbc0a174 100644
--- a/src/components/sections/image-split/ImageSplit.tsx
+++ b/src/components/sections/image-split/ImageSplit.tsx
@@ -55,7 +55,7 @@ const ImageSplitComponent = ({ section }: ImageSplitProps) => {
{section.imageExtended && (
)}
diff --git a/src/components/sections/image-split/image-split.module.css b/src/components/sections/image-split/image-split.module.css
index 21cc34f6e..a01b5fd1d 100644
--- a/src/components/sections/image-split/image-split.module.css
+++ b/src/components/sections/image-split/image-split.module.css
@@ -55,6 +55,7 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
+ justify-content: center;
}
.textContainer__link {
@@ -77,5 +78,6 @@
.image img {
display: block;
margin: 0 auto;
- width: 100%;
+ max-width: 100%;
+ height: auto;
}