制作在顺风 css 中在单行上旋转的响应式灵活图像？

Question

我想在 tailwind css 中重新创建在 https://www.tella.tv/ 上可见的效果 css:

我试图检查他们的源代码，但我无法让它在我的代码中工作。

我的标记如下：

<div class="lg:space-x-15 -mr-6 flex items-end justify-end space-x-4 sm:space-x-8 md:space-x-12 lg:-mr-0 lg:justify-center">
  <div class="shadow-gentle-backdrop w-35 lg:w-74 relative flex-shrink-0 rotate-3 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-44 md:w-56">
    <img class="" src="https://picsum.photos/300/400" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-30 sm:w-38 md:w-42 relative flex-shrink-0 -rotate-3 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 lg:w-64">
    <img class="" src="https://picsum.photos/300/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-54 sm:w-66 lg:w-133 relative mb-8 flex-shrink-0 rotate-2 transform overflow-hidden rounded-lg transition hover:rotate-0 focus:outline-none focus:ring-2 md:w-96">
    <img src="https://picsum.photos/500/400" alt="" />
  </div>
</div>

<div class="lg:-ml-100 xl:-ml-50 lg:space-x-15 -ml-20 flex items-end justify-center space-x-4 sm:space-x-8 md:space-x-12">
  <div class="shadow-gentle-backdrop w-35 md:w-68 lg:w-84 relative -mt-4 flex-shrink-0 -rotate-3 transform self-start overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-52">
    <img class="" src="https://picsum.photos/200/200" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-37 md:w-76 lg:w-92 rotate-4 relative flex-shrink-0 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-56">
    <img class="" src="https://picsum.photos/200/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-42 md:w-82 relative flex-shrink-0 -rotate-2 transform overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2 sm:w-60 lg:w-96">
    <img class="" src="https://picsum.photos/500/300" alt="" />
  </div>

  <div class="shadow-gentle-backdrop w-35 sm:w-58 md:w-76 lg:w-85 relative -mt-8 flex-shrink-0 rotate-2 transform self-start overflow-hidden rounded-lg opacity-80 transition hover:rotate-0 hover:opacity-100 focus:outline-none focus:ring-2">
    <img class="" src="https://picsum.photos/600/300" alt="" />
  </div>
</div>

但我没有以相同的比例得到想要的结果。

我很想重新创建上面的东西。尽管我确实从 tella 网站本身复制了代码并稍作更改，但所需的结果取决于图像大小。

就个人而言，我希望它们看起来像上面的屏幕截图并且每张图像的尺寸都相同，均为 1439*793

即使您使屏幕尺寸响应，ui 也应该看起来一样。

我该如何实现？

顺风游戏 → https://play.tailwindcss.com/5OXcK7F8qb?layout=horizontal

Answer 1

您的代码存在的问题是您没有为行添加容器 div。

我这样做了，并使用与 tella 网站几乎相同的代码重新创建了网格。我让它有点不对称，但您可以通过复制第一部分并粘贴到第二部分来轻松使其对称。

如果您希望它像其他网站一样响应迅速，您将不得不为它们设计新的断点和行为。我没有那样做，因为我不知道你希望每行有多少张图片，也不知道图片的高度应该是多少。现在至少有点反应了:)。

我希望这对你来说是一个好的开始：https://play.tailwindcss.com/hEJgrTUbPb?layout=horizontal&size=1836x720

制作在顺风 css 中在单行上旋转的响应式灵活图像？

make responsive flexible images that are rotated on a single line in tailwind css?

html

javascript

css

flexbox

tailwind-css