how to fix an image inside of a absolute element which has a relative height

Issue

i want to create a section in vuejs i want the img tag inside the absolute class to be inside of the absolute element. currently its overflowing. i want the image to be fit inside of the absolute element with a gap at the bottom. my image is a dimension of 509 * 460

        <div class="tw-absolute tw-top-0 tw-w-full tw-h-full">
          <div
            class="tw-flex tw-flex-col lg:tw-flex-row tw-container tw-gap-1 lg:tw-gap-[5.25rem] tw-text-center tw-mt-16"
          >
          <!-- !tw-w-[10%] !tw-h-[20rem] -->
            <img
              :src="img"
              class="tw-flex-1 tw-w-full tw-h-full tw-object-contain tw-hidden lg:tw-block"
              alt="flutter-hex-image"
              loading="lazy"
            />
            <div
              class="tw-flex tw-flex-col tw-gap-4 lg:tw-gap-6 lg:tw-text-left tw-flex-1"
            >

i dont want to change the classes of the img tag. how can i fit it inside the container that it does not overflow?

Solution

We can take the advantage of the fact that the parent element has a defined height of 476px at the lg breakpoint, since the <img> only appears from the lg breakpoint too.

We can apply a height of calc(476px - theme(spacing.16) - <bottom-space-desired>) to the <img>. The 476px is the height of the parent. theme(spacing.16) is the margin-top applied to a parent element. <bottom-space-desired> would be some valid CSS value representing the amount of "gap at the bottom" you want.

Since you specified you did not want to change the classes of the <img> element, we can override the height of the <img> from a parent element, by using the arbitrary variant [&_img].

For example, here's the <img> element contained, with 1rem bottom spacing (since you did not specify how much space you wanted).

tailwind.config = {
  prefix: 'tw-',
}

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="tw-relative tw-h-[40vh] lg:tw-h-[476px]">
  <img
    src="https://picsum.photos/400/400"
    class="tw-h-full tw-w-full tw-object-fill tw-opacity-10 lg:tw-hidden"
    alt="flutter-cta"
    loading="lazy"
  />
  <img
    src="https://picsum.photos/1200/1200"
    class="tw-h-full tw-w-full tw-object-fill tw-opacity-10 tw-hidden lg:tw-block"
    alt="flutter-cta"
    loading="lazy"
  />
  <div class="tw-absolute tw-top-0 tw-w-full tw-h-full">
    <div
      class="tw-flex tw-flex-col lg:tw-flex-row tw-container tw-gap-1 lg:tw-gap-[5.25rem] tw-text-center tw-mt-16 lg:[&_img]:tw-h-[calc(476px-theme(spacing.16)-1rem)]"
    >
      <!-- !tw-w-[10%] !tw-h-[20rem] -->
      <img
        src="https://picsum.photos/509/460"
        class="tw-flex-1 tw-w-full tw-h-full tw-object-contain tw-hidden lg:tw-block"
        alt="flutter-hex-image"
        loading="lazy"
      />
      <div
        class="tw-flex tw-flex-col tw-gap-4 lg:tw-gap-6 lg:tw-text-left tw-flex-1"
      >
        <div class="tw-text-black-core/[0.87]">
          <p class="header-1">Let's code your success story together!</p>
        </div>
        <div class="tw-text-black-core/[0.6]">
          <span class="sub-h1-regular">
            Join hands with us for your next app endeavor.
          </span>
        </div>
        <div>
          <a
            class="gradient-btn primary-btn lg:tw-mx-0"
            href="/contact"
          >
            <span class="sub-h3-semibold tw-border-none">Connect With Us</span>
            <Icon name="fa6-solid:arrow-right" class="fa tw-ml-3" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Answered By - Wongjn