Fix Aspect on Loading Image by native Width & Height Attributes. #css

fix-aspect.jsx

/**
 * @link https://parashuto.com/rriver/development/img-size-attributes-are-back
 */

import { Image } from '@chakra-ui/react'

export const myComponent = () => (
  // chakra image には元々 max-width: 100%; height: auto があたってる
  <Image
    src={'/some-large-image.png'}
    // native attributes である width, height に元画像のサイズなどを入れると
    // 画像の読み込み中でも、その aspect を保ったまま (高さを保持したまま) 表示され
    // 結果的に ui jank (レイアウトシフト、画面のガタツキ) が発生しない
    htmlWidth={1920}
    htmlHeight={1080}
  />
)