搜索

首页  >  问答  >  正文

我无法使用 TailwindCSS 将图像连续设置为相同大小

我正在使用 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>

感谢您的帮助

P粉978742405P粉978742405312 天前439

全部回复(1)我来回复

  • P粉270891688

    P粉2708916882024-02-18 00:11:49

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

    movie poster

    回复
    0
  • 取消回复