React: Component to maintain an aspect ratio for an image (i.e., forget the hack)

index.tsx

import './style.css'
import * as React from 'react'

export type Props = React.ImgHTMLAttributes<HTMLImageElement> & {
  ratio: number
}

function ImageAspectRatio(props: Props) {
  const { ratio, ...imgProps } = props

  return (
    <div className="c-image-aspect-ratio" style={{ paddingBottom: `${ratio}%` }}>
      <img {...imgProps} />
    </div>
  )
}

export default ImageAspectRatio

style.css

.c-image-aspect-ratio {
  position: relative;
}

.c-image-aspect-ratio > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}