图像应该占据剩余位置(Vue/Tailwind/Flex)

Question

我需要对以下设计进行编程

​

我想给中间的大图(暗红色)我的flexcontainer的重新匹配空间，其中黄色的东西是边距/填充。我这里的问题是，我的图像总是覆盖flex容器以及底部和svg中的图像。我不想给图像一个固定的高度或一些百分比值，因为我想保持它的响应性和动态性。下面是我的代码：

  <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- its等等，但它不能像预期的那样正常工作。

Answer 1

您可以通过多种方式完成此操作。Flexboxes是一种很好的方法，但对于缩略图图像，我会使用网格来使它们均匀(但也可以使用flexboxes )。

按钮是否使用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>

​