代码之家 › 专栏 › 技术社区 › Vishal

div内的图像问题-(Tailwind CSS中的网格)[重复]

tailwind-css css html

Vishal · 技术社区 · 1 年前

如果你觉得这个问题很傻,很抱歉,但我是Tailwind CSS的新手。

下面是我添加了Tailwind CSS类的html。

<div class="mx-auto max-w-7xl px-2 py-5">
  <div class="grid gap-6 grid-cols-3 ">
    <div class="col-span-2 row-span-2 rounded-lg bg-black">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
    <div class="rounded-lg bg-sky-500/100">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
    <div class=" rounded-lg  bg-sky-500/100">
      <img alt="Swimming Pool" src="...." class="rounded-lg" />
    </div>
  </div>
</div>

我现在正在使用CDN,下面是我的头部代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>

问题: 我希望第一个图像与其他图像垂直对齐,我发现问题是因为“间隙-6”,如果我删除间隙图像,则正确对齐。此外,我对div和img都使用了“roughed-lg”类,这是正确的吗?或者还有其他选择吗?

有人能帮帮我吗?

1 回复 | 直到 1 年前

Wongjn 1 年前

您可以考虑使用 <img> 通过应用 width: 100%; height: 100% 。这会使图像失真,因此您可能也希望应用 object-fit: cover 到 <img> 也防止失真。

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mx-auto max-w-7xl px-2 py-5">
  <div class="grid gap-6 grid-cols-3 ">
    <div class="col-span-2 row-span-2 rounded-lg bg-black">
      <img alt="Swimming Pool" src="https://picsum.photos/1000/500" class="rounded-lg w-full h-full object-cover" />
    </div>
    <div class="rounded-lg bg-sky-500/100">
      <img alt="Swimming Pool" src="https://picsum.photos/1000/1000" class="rounded-lg" />
    </div>
    <div class=" rounded-lg  bg-sky-500/100">
      <img alt="Swimming Pool" src="https://picsum.photos/1000/1500" class="rounded-lg" />
    </div>
  </div>
</div>