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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.