summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/images/responsive-image.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/images/responsive-image.tsx')
-rw-r--r--src/components/molecules/images/responsive-image.tsx14
1 files changed, 12 insertions, 2 deletions
diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx
index 9f96f18..3d54e95 100644
--- a/src/components/molecules/images/responsive-image.tsx
+++ b/src/components/molecules/images/responsive-image.tsx
@@ -13,6 +13,10 @@ type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & {
*/
caption?: string;
/**
+ * Set additional classnames to the figure wrapper.
+ */
+ className?: string;
+ /**
* The image height.
*/
height: number | string;
@@ -34,16 +38,22 @@ type ResponsiveImageProps = Omit<ImageProps, 'alt' | 'width' | 'height'> & {
const ResponsiveImage: VFC<ResponsiveImageProps> = ({
alt,
caption,
+ className = '',
layout,
objectFit,
target,
...props
}) => {
return (
- <figure className={styles.wrapper}>
+ <figure className={`${styles.wrapper} ${className}`}>
{target ? (
<Link href={target} className={styles.link}>
- <Image alt={alt} layout={layout || 'intrinsic'} {...props} />
+ <Image
+ alt={alt}
+ layout={layout || 'intrinsic'}
+ objectFit={objectFit || 'contain'}
+ {...props}
+ />
{caption && (
<figcaption className={styles.caption}>{caption}</figcaption>
)}