我無法使用 TailwindCSS 將影像連續設定為相同大小

Question

我正在使用 TailwindCSS 來建立我的頁面設計。我無法將組件和圖像設定為相同的大小。

我已經嘗試了一些與 flex、wrap 的組合，改變 div 或圖像的寬度，但找不到解決方案。我想要的結果是每部電影包含相同大小的包含圖像的矩形，相同大小的圖像，其名稱如下。 而且，對於溢出，我希望能夠在 x 尺度上滾動它們，但不能在 y 尺度上滾動。我設法做到了，但我需要保留它並且也有合適的尺寸。

我希望圖片像這樣顯示：（https://i.stack.imgur.com/16C7M.jpg） 但現在它們是這樣的：(https://i.stack.imgur.com/8L0sD.png)。

一張圖像的程式碼對於所有圖像都是相同的，只是圖像的連結及其名稱發生了變化。一張圖像的程式碼：

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

前面的程式碼包含在以下程式碼中：

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

感謝您的幫助

Answer 1

您需要寫這行程式碼，以下是程式碼。