0

How can I make the height and width of a div grow and shrink with their aspect ratio while resizing the window?. I'm using tailwind css with next JS and I want to make my div responsive while resizing the window, and in doing that I need the height to shrink as well. how is that possible?

<div className="relative flex -z-10 h-auto w-72 object-scale-down">
          <Image src={"/profile.webp"} fill objectFit="cover" />
        </div>

I'm using an image as a content for the div.

mobix
  • 465
  • 4
  • 10
  • Version of nextjs? if 13 use on the image the style prop as `objectFit` is no more supported: ``. Another approach is to give sizes directly on the image and setting the layout as responsive in order to make it grow and shrink based on the aspect ratio of the sizes you previously passed – eroironico Dec 14 '22 at 09:54

0 Answers0