How to create a fullscreen image

[hrvstr]

Hi, I am trying to create a fullscreen hero section. I know I can use the fullWidth layout to fill the width of the container but how about the height? My image comes from a Sanity CMS and I am using the Astro component with Tailwind CSS.

I know I can add the h-screen class but this will stretch the image to fit which seems not ideal. Am I missing something obvious here?

import { Image } from "@unpic/astro";

<Image
  src={image}
  layout="fullWidth"
  class="h-screen"
  priority
/>

[ascorbic]

Hey. Using CSS is the correct answer. It shouldn't stretch the image, because it sets object-fit: cover by default. If it is strecthing it, could you inspect it and see what the style is?

[hrvstr]

Oh, stretching was the wrong word here, sorry! I meant the image is proportionally scaled up, so it's a bit pixelated. Maybe it would be nice to add a "fullscreen" option as well and generate a srcset with a fitting height as well?

At the moment only the width is considered.

<img 
  class="h-full" 
  loading="lazy" 
  decoding="async" 
  style="object-fit:cover;width:100%" 
  srcset="https://cdn.sanity.io/images/xyz.jpg?w=640&amp;fit=min&amp;auto=format 640w, ..."
>