在 div 顺风中约束图像答案

【问题标题】：Constrain image inside div tailwind在 div 顺风中约束图像
【发布时间】：2021-08-19 19:13:15
【问题描述】：

这是我正在使用的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class=" h-48 p-3 bg-gray-700">
  <div class="h-full w-48 bg-gray-700 border border-gray-300">
    <div class="h-6 bg-gray-400 opacity-50 w-full">
      Username
    </div>
    <img class="w-full object-contain" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
  </div>
</div>

我在将图像限制到父 div 时遇到问题。我想要完成的是让用户图像约束在父 div 内，而不是溢出边界外。附上的图片就是现在的样子。我不知道我做错了什么或错过了什么。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

让它成为一个弹性盒容器

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
      <div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
        <div class="h-6 bg-gray-400 opacity-50 w-full">
          Username
        </div>
        <img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
      </div>
  </div>

或 CSS 网格：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
      <div class="h-full w-48 bg-gray-700 border border-gray-300 grid">
        <div class="h-6 bg-gray-400 opacity-50 w-full">
          Username
        </div>
        <img class="w-full object-contain min-h-0 h-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
      </div>
  </div>

【讨论】：

好的，两个都爱。我只是累了，没有看到我错过了什么。让我问你一下。如果你有多个这样的 div，你会如何将它们并排放置？
@ArcticMediaRyan 像这样：jsfiddle.net/zfnehovL ?
@ArcticMediaRyan 或者这个：jsfiddle.net/zfnehovL/1

【解决方案2】：

在父容器上使用flex flex-col 并将min-h-0 添加到图像中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class=" h-48 p-3 bg-gray-700">
  <div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
    <div class="h-6 bg-gray-400 opacity-50 w-full">
      Username
    </div>
    <img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
  </div>
</div>

【讨论】：

天哪，我为什么没看到。我已经看了 30 分钟了。我选择了这个作为正确答案！