<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 md:col-span-6 bg-teal-400">
[ Tu jest pojedynczy CARD ]
</div>
</div>
Mam grid, jak powyżej i wrzucam do niego 6 "kart" CARD ( zdjęcie z dwoma tekstami na nim )
Przykład zaczerpnąłem z:
https://tailwindflex.com/@ip-leroy/tailwind-image-card-with-text-above-it
Ale nie wiem jak powiększyć zdjęcie, tak by rosło/malało po zmianie rozmiaru przeglądarki (RWD). Jak zachować aspect ratio i żeby zdjęcie było w całości (w sensie nie wycinek) i wycentrowane (zwględem kontenera w którym się znajduje).
Mając same zdjęcia wszystko działało dobrze, dopiero próba zmiany zdjecia na kartę spowodowała, że coś się chrzani, nie znam dobrze Tailwinda więc ....utknąłem :)
Chciałbym, żeby zdjęcia w zależności od rozmiaru przeglądarki wypełniały całość div-a przynajmniej w jednym kierunku.
Z góry dzięki za podpowiedzi!