React - <img>タグで画像表示

Reactで画像をアスペクト比を維持して表示する方法メモ。

import Img from './images/img.png'

const imgStyle = {
    object-fit: contain;
}

const ImgComponent = () => (
    <img className="imgStyle" src={Img} alt="" />
)

object-fitは、置換要素(<img>や<video>)などの中身を、コンテナーにどのようにはめ込むかを設定する。

containを指定すると、画像のアスペクト比を維持したままコンテンツボックスに収まるように縮小することができる。