无法对齐网格tailwindcss中的图像答案

【问题标题】：Cannot align images in grid tailwindcss无法对齐网格tailwindcss中的图像
【发布时间】：2021-03-05 20:40:47
【问题描述】：

我的 Tailwind CSS 网格系统有问题。两张图片的底部有点滞后。我似乎找不到解决这个问题的方法。

<div class="grid grid-cols-4 grid-rows-2 gap-4">
        <div class="col-start-1 col-span-2 row-start-1 row-span-2">
            <img src=".." class="rounded-lg"/>
        </div>
        <div class="col-start-3 col-span-1 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
        <div class="col-start-4 col-span-1 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
        <div class="col-span-2 row-start-2 row-span-1">
            <img src="..." class="rounded-lg"/>
        </div>
    </div>

你有什么想法吗？我错过了什么吗？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

尝试使用!important 以及object-fit: cover 和width: 100% 覆盖图像高度为100% 的规则。像这样：

img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}

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

<div class="grid grid-cols-4 grid-rows-2 gap-4">
    <div class="col-start-1 col-span-2 row-start-1 row-span-2">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-start-3 col-span-1 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-start-4 col-span-1 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
    <div class="col-span-2 row-start-2 row-span-1">
        <img src="https://img.fonwall.ru/o/1c/kosmos-planety-vselennaya-360z.jpg" class="rounded-lg" />
    </div>
</div>

【讨论】：