Ich kann mit TailwindCSS keine Bilder nacheinander auf die gleiche Größe einstellen
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
