无法在网格 tailwindcss 中对齐图像

Question

我对 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>

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

Answer 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>

无法在网格 tailwindcss 中对齐图像

Cannot align images in grid tailwindcss

css

tailwind-css