Tailwind CSS ObjectFit指令（如object-cover等）无效果问题咨询

你的问题出在图片的尺寸设置上：给<img>添加了固定的w-6 h-6类，这会强制图片缩放到24px×24px，完全忽略父容器的尺寸，导致object-fit相关指令没有发挥作用的空间——object-fit属性只有在图片尺寸需要适配容器时才会生效，比如图片尺寸大于容器，或者图片被设置为填充容器空间时。

修正后的代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Object Cover Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="w-64 h-64 overflow-hidden rounded-lg shadow-lg bg-green-100">
      <img src="https://via.placeholder.com/400" alt="Example Image" class="w-full h-full object-cover">
    </div>
</body>
</html>

关键说明 #

• 移除w-6 h-6，替换为w-full h-full：让图片铺满父容器的整个空间，此时object-fit就能控制图片如何适配这个容器了。
• 根据需求替换object-cover为其他指令：比如object-fill（拉伸填充容器）、object-contain（保持比例完整显示）、object-center（居中显示）等。

内容的提问来源于stack exchange，提问作者Kabira K