Tailwind / image grid / cards

Question

 <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!

Answer 1

Ok, więc tak:

Skalowanie obrazka wykonasz przy pomocy scale, a aspekt ratio odpowiednio aspect-ratio.

Choć moim zdaniem bardziej chodzi o efekt w którym zdjęcie jest tłem całego kontenera w ramach grida - w przeciwnym razie żeby skalować trzeba byłoby dodać np. hover:scale-120.

Wycentrowanie uzyskasz bg-center, skoro to tło to warto dodać bg-no-repeat żeby nie zdublowało obrazka i bg-cover żeby pokryło cały kontener. Przykład który pokazuje jak to można zrobić: https://play.tailwindcss.com/4wuGz42NW5