使响应灵活的图像在顺风css的单线上旋转？

Question

我希望在顺风css中重新创建在https://www.tella.tv/上可见的效果：

​

​

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

我的标记看起来像：

<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看起来应该是一样的，即使您使屏幕大小响应。

我怎样才能做到这一点？

顺风游戏→→

Answer 1

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

我这样做了，用与tella网站几乎相同的代码重新创建了网格。我使它有点不对称，但你可以很容易地使它对称的复制第一节和粘贴在第二。

如果你想让它像其他网站一样具有响应性，你必须为这些网站设计新的断点和行为。我没有这样做，因为我不知道你想在每一行上有多少张图片，或者图像应该有多高。它现在至少有一点反应:)。

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