Saya menggunakan TailwindCSS untuk mencipta reka bentuk halaman saya. Saya tidak boleh menetapkan komponen dan imej kepada saiz yang sama.

Saya telah mencuba beberapa kombinasi dengan flex, wrap, menukar lebar div atau imej, tetapi tidak dapat mencari penyelesaian. Hasil yang saya inginkan ialah setiap filem mengandungi segi empat tepat bersaiz sama yang mengandungi imej, imej bersaiz sama dengan nama berikut. Selain itu, untuk limpahan, saya mahu dapat menatalnya dalam skala x, tetapi bukan skala y. Saya berjaya melakukannya tetapi saya perlu menyimpannya dan mempunyai saiz yang betul juga.

Saya mahu imej dipaparkan seperti ini: (https://i.stack.imgur.com/16C7M.jpg) Tetapi sekarang mereka kelihatan seperti ini: (https://i.stack.imgur.com/8L0sD.png).

Kod untuk satu imej adalah sama untuk semua imej, hanya pautan ke imej dan namanya bertukar. Kod untuk imej:

<div
            class="bg-white rounded-[10px] border-4 cursor-pointer m-5 flex-wrap duration-500 w-1/6"
          >
            <img
              src="https://m.media-amazon.com/images/M/MV5BMWM5YzhmNGMtZTI4Ny00MGM4LThkYjAtMDIyMTEwNTQyZmQ1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX182_CR0,0,182,268_AL_.jpg"
              alt="movie poster"
              class="rounded-t-[0.625rem] rounded-b-none w-full"
            />
            <div class="">
              <h1 class="text-xl font-normal">I am not okay with this</h1>
            </div>
          </div>

Kod sebelumnya disertakan dalam kod berikut:

<div class="container mx-auto">
      <div class="m-5">
        <h1 class="text-3xl m-2 pb-1 font-bold text-black">Action</h1>
        <div class="flex overflow-y-hidden overflow-x-scroll border-4">
        ....
        .... (put here the code for the images)
        ....
        </div>
     </div>
</div>

Terima kasih atas bantuan anda