图像应该占据剩余位置（Vue/Tailwind/Flex）

Posted 2023-03-07

【中文标题】图像应该占据剩余位置（Vue/Tailwind/Flex）

【英文标题】：Image should take remaining place (Vue/Tailwind/Flex)

【发布时间】：2021-07-17 19:12:48

【问题描述】：

我需要编写以下设计

我想给中间的大图像（深红色）提供我的 flexcontainer 的剩余空间，其中黄色的东西是边距/填充。我在这里遇到的问题是，我的图像总是与 flex 容器以及底部的图像和 svgs 重叠。我不想给图像一个固定的高度，也不想给一些百分比值，因为我想让它保持响应和动态。这是我的代码：

  <div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
  <div class="flex h-3/4 justify-center items-center">
    <svg
    </svg>

    <img
      class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
      My Big Image
    />
    <svg
    </svg>
  </div>
  <div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
    <div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
      <img
       the orange images
      />
    </div>
  </div>
</div>

这里最好的解决方案是我删除所有高度，只使用 flex flex-1 flex-shrink 等等，但它不能按预期正常工作。

【参考方案1】：

您可以通过多种方式做到这一点。弹性盒是很好的方法，但对于缩略图图像，我会使用网格来使它们均匀（但肯定也可以使用弹性盒）。

按钮是否使用 SVG 并不重要。但如果您对它们有任何疑问 - 请提供真实的复制示例（https://play.tailwindcss.com/ 可能很有用）。

演示：https://play.tailwindcss.com/RsXsrdSYG3

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
  <div class="flex items-center">
    <button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
    <div class="px-6">
      <img src="https://via.placeholder.com/1920x1080" />
    </div>
    <button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-6">
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
  </div>
</div>

或者如果你想填充屏幕高度（但空白区域会在大图像上可见以保持响应率）。

演示：https://play.tailwindcss.com/hTYuGjPHHk

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="h-screen bg-gray-50 p-8 flex flex-col">
  <div class="flex items-center flex-1">
    <button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
    <div class="px-6 h-full flex items-center">
      <img src="https://via.placeholder.com/1920x1080" />
    </div>
    <button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-6">
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
    <img src="https://via.placeholder.com/1920x1080" />
  </div>
</div>

【讨论】：

感谢您的努力。不幸的是，这个解决方案不能正确地为我工作，因为我需要使用固定/绝对值来定位它与我需要使用的其他组件。看到我的演示 play.tailwindcss.com/nSdJsYxuJW ，图像缩略图正在走出我的屏幕:(