时间戳

首页 > 解决方案 > 无法在网格 tailwindcss 中对齐图像

css - 无法在网格 tailwindcss 中对齐图像

问题描述

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

在此处输入图像描述

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

标签： csstailwind-css

解决方案

尝试使用和将图像高度的规则覆盖为100 %。像这样：!importantobject-fit: coverwidth: 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>

推荐阅读