Frames an image by having the `object-fit: contain;` foreground image and `object-fit: cover;` on the blurred background image.

BlurFramedImage.tsx

import Image from 'next/image'
import styles from './BlurFramedImage.module.scss'

type BlurFramedImageProps = {
  src: string
  alt?: string
}

/**
 * Renders an image within a frame, applying a blur effect to the image used as the background.
 * The component fills the dimensions of the nearest relatively positioned parent element.
 *
 * @param {Object} props - The properties object.
 * @param {string} props.src - The source URL of the image.
 * @param {string} [props.alt] - An optional alternative text to describe the image.
 *
 * @example
 * <BlurFramedImage src="https://example.com/image.jpg" alt="An example image" />
 */
function BlurFramedImage(props: BlurFramedImageProps) {
  return (
    <div className={styles.base}>
      <Image className={styles.bgImg} src={props.src} alt='random' fill />
      <Image className={styles.mainImg} src={props.src} alt='random' fill />
    </div>
  )
}

export default BlurFramedImage

/*
// BlurFramedImage.module.scss

.base {
  --blur-amount: 20px;

  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  background-color: #888;
  z-index: -2;
}

.mainImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bgImg {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  z-index: -1;
  transform: translate(-50%, -50%);
  filter: blur(var(--blur-amount));

  // Make the background image larger than the container so that the
  // empty space around the image isn't 'blurred in' as transparency.
  width: calc(100% + var(--blur-amount) * 2);
  height: calc(100% + var(--blur-amount) * 2);
}
*/