Unable to achieve the image responsiveness in NextJS 13 + Tailwind CSS

Question

I'm trying to achieve the UI with responsiveness as below image,

My code for this is,

<div className="w-full flex flex-col justify-center items-center py-5">
      <div className="flex flex-col gap-2 text-center -mb-2 z-10">
        <p className="text-[.7rem] sm:text-sm md:text-base uppercase text-greyLight font-normal">
          Everything about our
        </p>
        <h1 className="text-[2rem] sm:text-[2.5rem] md:text-[4rem] font-normal leading-tight tracking-tight">
          NAME OF THE <br /> COLLECTION
        </h1>
      </div>
      <div className="w-full h-[350px] md:h-[500px] -mt-1 md:-mt-3 relative">
        <Image
          className="w-full h-full object-cover"
          src={HeroImg}
          alt="hero-image"
          quality={100}
          fill={true}
        />
      </div>
      <div className="-mt-10 z-10">
        <Line />
      </div>
      <Container>
        <p className="text-sm md:text-base text-center mt-2 font-shiseido font-light">
          Lorem Ipsum has been the industry's standard dummy text ever since the
          1500s, when an unknown printer took a galley of type and scrambled it
          to make a type specimen book. It has survived not only five centuries,
          but also the leap into electronic typesetting, remaining essentially
          unchanged. Lorem Ipsum has been the industry's standard dummy text
          ever since the 1500s, when an unknown printer took a galley of type
          and scrambled it to make a type specimen book. It has survived not
          only five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged
        </p>
      </Container>
      <Button
        onclickFunction={onclickFunction}
        title={"EXPLORE ARTISTS"}
        className={"mt-7"}
      />
    </div>

And I've done all the things except the image's responsiveness. When I shrink the view port, I want the image to be resized without cropping the image. But when I set the objectFit to contain, the image is not getting the height I give and not filling the full view width as per the design. In cover option, It is not resizing. Also I want the text "NAME OF THE COLLECTION" to be fitted above it. Any help on this to achieve it would be helpfull.

Answer 1

Have your tried using an aspect ratio? The image will resize the height based on the screen width