我尝试用网格放置照片,使它们看起来像正方形。
<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>
如何使用顺风使图像看起来像正方形?是的,我可以使用
object-fit: cover;
,但我需要为此硬设置宽度和高度。
最佳答案
我刚刚为所需的类添加了自定义样式:
width: 50vw;
height: 50vw;
也许您可以使用这些样式创建自定义 Tailwind 类。
关于css - Tailwind 使图像方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61226538/