Ich kann mit TailwindCSS keine Bilder nacheinander auf die gleiche Größe einstellen

Question

Ich verwende TailwindCSS, um mein Seitendesign zu erstellen. Ich kann die Komponente und das Bild nicht auf die gleiche Größe einstellen.

Ich habe einige Kombinationen mit Flex, Wrap und dem Ändern der Breite von Divs oder Bildern ausprobiert, kann aber keine Lösung finden. Das gewünschte Ergebnis ist, dass jeder Film das gleich große Rechteck enthält, das das Bild enthält, das gleich große Bild mit dem folgenden Namen. Außerdem möchte ich die Überläufe in der X-Skala scrollen können, nicht jedoch in der Y-Skala. Ich habe es geschafft, aber ich muss es behalten und auch die richtige Größe haben.

Ich möchte, dass das Bild so angezeigt wird: (https://i.stack.imgur.com/16C7M.jpg) Aber jetzt sehen sie so aus: (https://i.stack.imgur.com/8L0sD.png).

Der Code für ein Bild ist für alle Bilder gleich, nur der Link zum Bild und sein Name ändern sich. Code für ein Bild:

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

Der vorherige Code ist im folgenden Code enthalten:

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

Vielen Dank für Ihre Hilfe

Answer 1

您需要编写这行代码，下面是代码。