Issue
Sorry if you find this question silly, But I'm new to Tailwind CSS.
So below is my html with Tailwind CSS classes added.
<div class="mx-auto max-w-7xl px-2 py-5">
<div class="grid gap-6 grid-cols-3 ">
<div class="col-span-2 row-span-2 rounded-lg bg-black">
<img alt="Swimming Pool" src="...." class="rounded-lg" />
</div>
<div class="rounded-lg bg-sky-500/100">
<img alt="Swimming Pool" src="...." class="rounded-lg" />
</div>
<div class=" rounded-lg bg-sky-500/100">
<img alt="Swimming Pool" src="...." class="rounded-lg" />
</div>
</div>
</div>
I'm using CDN at the moment, Below is my head section code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
Issue : I want first image to be aligned vertically with other images, I found the issue is because of "gap-6", If I remove gap images are aligned properly. Also I'm using "rounded-lg" class for both div and img is it correct? or is there any other alternative to it?
Can someone please help me?
Solution
You could consider filling the parent element with the <img>
by applying width: 100%; height: 100%
. This will make the image distorted, so you may wish to also apply object-fit: cover
to the <img>
too to prevent the distortion.
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
<div class="mx-auto max-w-7xl px-2 py-5">
<div class="grid gap-6 grid-cols-3 ">
<div class="col-span-2 row-span-2 rounded-lg bg-black">
<img alt="Swimming Pool" src="https://picsum.photos/1000/500" class="rounded-lg w-full h-full object-cover" />
</div>
<div class="rounded-lg bg-sky-500/100">
<img alt="Swimming Pool" src="https://picsum.photos/1000/1000" class="rounded-lg" />
</div>
<div class=" rounded-lg bg-sky-500/100">
<img alt="Swimming Pool" src="https://picsum.photos/1000/1500" class="rounded-lg" />
</div>
</div>
</div>
Answered By - Wongjn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.