顺风图像不包含在集装箱中。

Question

我正在努力使我的图像充满或适合他们的容器。我要他们把所有可用的景观，而不是超出视线。

<div class="flex h-screen max-h-screen border-2">
  <div class="w-1/2">
    <div class="h-12 bg-red-100">here</div>
    <div class="flex-1 border-2 border-red-200">
      <img class="h-full object-contain" src="https://picsum.photos/2000/4000" alt="first image" />
    </div>
  </div>
  <div class="w-1/2">
    <div class="h-12 bg-red-100">here</div>
    <div class="flex-1 h-full border-2 border-red-200">
      <img class="object-fill" src="https://picsum.photos/200/300" alt="test" />
    </div>
  </div>
</div>

https://play.tailwindcss.com/6GMm4k4vxU

THX

Answer 1

您可以移除图像的容器，并将w-full和h-full应用于两者。然后应用overflow-hidden对图像的溢出部分进行隐藏。

当然，第二个图像(https://picsum.photos/200/300)总是模糊的，因为我们正在放大它。

您还可以删除max-h-screen，因为我们已经为屏幕设置了一个常量高度，即100vh (h-screen)。

<div class="flex h-screen border-2 border-red-600">
  <div class="flex w-1/2 flex-col">
    <div class="min-h-12 bg-red-100">here</div>
    <img class="h-full w-full overflow-hidden" src="https://picsum.photos/2000/4000" alt="test" />
  </div>
  <div class="flex w-1/2 flex-col">
    <div class="min-h-12 bg-red-100">here</div>
    <img class="h-full w-full overflow-hidden" src="https://picsum.photos/200/300" alt="test" />
  </div>
</div>

顺风游戏

以上方法可能会扩展您的图像。下面是另一个解决方案，应该解决这个问题：

彻底移除图像。我们将把它们作为背景图像来展示。我们将从将背景图像添加到tailwind.config开始

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        '1000': "url('https://picsum.photos/1000/1000')",
        '1200': "url('https://picsum.photos/1200/1200')",
      }
    }
  }
}

您可以阅读有关此方法的这里。您还可以了解有关配置默认主题这里的内容。

然后，我们将通过将视图拆分为两个容器(每个容器都是w-1/2)来更改图像的结构。每个容器将有一个图像作为使用我们创建的自定义背景(bg-1000和bg-1200)应用的背景。每个容器都有一个div。这个div完全是可选的。

<div class="flex h-screen border-2 border-red-600">
  <div class="w-1/2 bg-1200">
    <div class="h-12 bg-red-100">here</div>
  </div>
  <div class="w-1/2 bg-1000">
    <div class="h-12 bg-red-100">here</div>
  </div>
</div>

顺风游戏