next image sizing & layout recommendations

I have a small part of my website where I want an image. The code is roughly:

      <div className="flex flex-col gap-5">
        <div className="flex gap-4 w-full h-full items-center ">
          <div className="relative h-20 w-20">
            <Image
              src="/images/ggbridge.jpg"
              alt="me"
              className="rounded-full border-2 border-purple-500 object-cover"
              fill={true}
            />
          </div>
          <h1 className="py-0.5 text-4xl font-extrabold text-purple-400 sm:text-4xl">
            Hi, <span className="font-medium text-white">I'm Jack</span>
          </h1>
        </div>
      </div>

      <div className="flex flex-col gap-5">
        <div className="flex gap-4 w-full h-full items-center ">
          <div className="relative h-20 w-20">
            <Image
              src="/images/ggbridge.jpg"
              alt="me"
              className="rounded-full border-2 border-purple-500 object-cover"
              fill={true}
            />
          </div>
          <h1 className="py-0.5 text-4xl font-extrabold text-purple-400 sm:text-4xl">
            Hi, <span className="font-medium text-white">I'm Jack</span>
          </h1>
        </div>
      </div>

just wondering if doing a fixed height on the parent div like this is the best way to go about this. since no container in the hierarchy has a fixed height, i dont see a way that I can let it grow to the parent. my other question was how I can enlarge the image itself without changing the size it appears as (essentially crop/zooming it). i always struggle with image styling like this, so any help is appreciated.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

next image sizing & layout recommendations