Tailwind让图片变成正方形。

Question

我尝试使用网格来排列照片，以便它们看起来像正方形。

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

<div class="container my-12 mx-auto">
  <div class="flex flex-wrap -mx-2">
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">
        <img class="" src="https://lh3.googleusercontent.com/proxy/XTJmiQ_8JSKjnjQHij4OKDLe_achY1O7fUqOR2a-V27JZJxVBnNIfMcl5T_H0xeF7Jfd29u81QaofpZewSst1WhP40eCn-eh-KUjPfXczI162XUrWByvyR-qESrUoJshXQ" alt="">
      </div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-500">2</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">3</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">4</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-500">5</div>
    </div>
    <div class="w-1/3 px-2 my-2">
      <div class="bg-gray-400">6</div>
    </div>
  </div>
</div>

如何在使用Tailwind时将图片呈现为正方形？可以使用object-fit: cover;，但需要硬编码设置宽度和高度。

- Teretto

---

你解决了吗？怎么解决的？ - parsecer

Answer 1

像这样的东西应该可以工作：

<ul class="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-screen h-screen">
  <li class="col-span-1 flex flex-col text-center bg-white">
    <div class="pb-full relative">
      <div class="absolute inset-0 h-full w-full">
        <img class="h-full w-full object-cover object-center" src="https://unsplash.it/400/400" />
      </div>
    </div>
  </li>
</ul>

我没有在隔离环境中完全测试它，是从我的代码库中复制的...

- Julian Rubisch

Answer 2

我刚刚为所需的类添加了自定义样式：

。

 width: 50vw;
 height: 50vw;

也许您可以使用自定义的Tailwind类来应用这些样式。

- parsecer

Answer 3

您可以使用Tailwind的w-x和h-y实用程序类在图像上硬设置宽度和高度，或者如果您想要的x和y值不存在，则扩展您的Tailwind配置文件以包括它们，然后使用它们。

对于不存在的高度，只需像这样扩展您的配置：

theme: {
//  this makes Tailwind merge the configuration w/o overriding it.
extend: {
  height: theme => ({
    "screen/2": "50vh",
    "screen/3": "calc(100vh / 3)",
    "screen/4": "calc(100vh / 4)",
    "screen/5": "calc(100vh / 5)",
  }),
},

或者你可以使用简单的百分号来完成同样的事情。

你可以使用任何一个Tailwind的固定或流体宽度类，根据你的评论，你想要响应式的行为，所以请查看流体宽度工具或者如果你需要特定的东西，可以扩展它们。

https://tailwindcss.com/docs/width/#fluid-width

- dougajmcdonald

---

但是如果我硬性设置宽度和高度，它如何实现响应式呢？ - Teretto

如果您想要响应式设计，请将宽度和高度设置为分数或百分比。因此，请使用其中一个流体宽度，例如1/5代表20％（这在tailwind文档的宽度部分中都有说明）。 - dougajmcdonald

@dougajmcdonald，你可以将宽度设置为百分比，但是高度无法设置为百分比。 - Kusmayadi

就像我在答案中所说的那样，“如果你想要的值不存在，可以扩展你的 tailwind 配置文件来包含它们”。 - dougajmcdonald

你使用了 calc(100vh)，但是 vh 是依赖于高度的吗？所以如果宽度设置为 w-3/4，意味着 vw/3，那么高度为 hv/3 将是不同的长度，因此不会形成正方形？ - parsecer