Tailwind CSS：hover图片移动端无法占满父容器的修复咨询

问题根源在于图片元素未强制占满父容器的宽高：你使用了object-cover控制图片缩放逻辑，但默认<img>是行内元素，不会自动继承父容器尺寸，导致移动端无法填满容器。

修复方案 #

给图片添加w-full和h-full类，强制图片占满父容器的宽高，配合object-cover即可实现跨端一致的填充效果：

<div class=" group h-[20rem] py-12  relative overflow-hidden p-6 rounded-lg shadow dark:shadow-gray-800 shadow-md dark:hover:shadow-gray-700 bg-white dark:bg-slate-900 text-center transition-all duration-500 ease-in-out border-t-8 border-sky-400">

    <div class="content mt-7">
        <h2 class="title text-xl font-semibold">Fitness & Wellness</h2>
        <p class="text-slate-400 mt-3">Custom software for fitness and wellness which is much needed professionally and personally.
        </p>
    </div>

    <div class="hidden group-hover:block ">
        <div class="absolute inset-0 ">
            <!-- 添加w-full h-full强制占满容器 -->
            <img src="./assets/images/services/Fitness 1.jpg" alt="" class="object-cover w-full h-full" >
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"></div>
        </div>

        <div class="absolute bottom-0 right-0 left-0 mb-6">
            <a href="" class="text-white text-xl font-bold">Fitness & Wellness</a>
        </div>
    </div>
</div>

原理说明 #

• w-full/h-full：让图片元素的宽高完全匹配父容器（absolute inset-0定义的全屏容器）
• object-cover：确保图片按原始比例缩放，自动裁剪超出容器的部分，同时保留图片核心内容的完整性

修改后，桌面端和移动端的图片都会正确占满父容器，悬停显示效果将保持一致。

内容的提问来源于stack exchange，提问作者Sohaib Butt