How to use multiple height in multiple breakpoints when using fullWidth layout?

[lamualfa]

Descriptions

• I don't know about the image dimensions (width & height).
• I want to give a space for the image. The space has a fixed height & flexible width limited by max-width.

On Desktop Screen

The image fits perfectly with the box when using the desktop screen.

On Mobile Screen

But it's too big for the mobile screen.

The Code

import { Image } from '@unpic/react'

function Header(props) {
  return (
    <header className={cs(props.rootClass, rootClass)}>
      <Link href='/' className={rootLogoClass}>
        <Image
          src='https://img.logoipsum.com/286.svg'
          alt='Logo'
          layout='fullWidth'
          height={50}
        />
      </Link>
    </header>
  )
}

[ascorbic]

Hi. The component doesn't currently have support for art direction. Your best bet there is to use CSS rules to set the height breakpoints

[ascorbic]

The latest release does now support art direction. See this post for details. https://dev.to/ascorbic/level-up-your-web-images-with-unpic-picture-tags-4jh1