My screen shot
Hey I have a problem (potentially with tailwind) with my images ratio.
All is working well on mobile and on desktop/laptop unless the window starts to be near full screen.
<div class="relative w-full lg:h-74 h-full sm:px-4">
<a href="<?= htmlspecialchars($post['imagepath']) ?>" data-caption="Caption">
<img src="<?= htmlspecialchars($post['imagepath']) ?>" alt="" class="sm:rounded-lg w-full h-full object-cover">
</a>
</div>
I tried changing the values but it didn’t help…
Is there a chance someone can help with this?
3
The first 4 items are the ones i made that set an aspect ratio with tailwind classes, then the other 4 are the html you set in the question with default tailwind settings. I can’t get them in 16:9 with your code, you must have other styles affecting the ratio.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-16">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="p-4 border rounded-xl">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="rounded-lg w-full object-cover aspect-video">
</a>
</div>
<div class="p-4 border rounded-xl">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="rounded-lg w-full object-cover aspect-video">
</a>
</div>
<div class="p-4 border rounded-xl">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="rounded-lg w-full object-cover aspect-video">
</a>
</div>
<div class="p-4 border rounded-xl">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="rounded-lg w-full object-cover aspect-video">
</a>
</div>
</div>
</div>
<div class="container mx-auto py-16">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="relative w-full lg:h-74 h-full sm:px-4">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/300/300" alt="" class="sm:rounded-lg w-full h-full object-cover">
</a>
</div>
<div class="relative w-full lg:h-74 h-full sm:px-4">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="sm:rounded-lg w-full h-full object-cover">
</a>
</div>
<div class="relative w-full lg:h-74 h-full sm:px-4">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="sm:rounded-lg w-full h-full object-cover">
</a>
</div>
<div class="relative w-full lg:h-74 h-full sm:px-4">
<a href="#" data-caption="Caption">
<img src="https://picsum.photos/200/300" alt="" class="sm:rounded-lg w-full h-full object-cover">
</a>
</div>
</div>
</div>
New contributor
Eloi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.