React搭配Tailwind时object-contain/fill失效，图片无法适配容器

问题原因及修复方案 #

• 你没有给img标签设置占满父容器的宽高属性：object-contain只负责图片在自身盒子内的适配规则，必须先给img加上w-full h-full，让图片的盒子先撑满父级的div容器，适配规则才会生效。
• 你写的min-w-100是无效Tailwind类：Tailwind默认无该预设类，如果你需要的是最小宽度100%，请替换为min-w-full；如果是自定义100px宽度，需要写成min-w-[100px]的任意值格式。
• 任意值类（如min-w-[300px]）不生效请检查tailwind.config.js的content配置：确保配置中包含了你所有存放React组件的文件路径，示例正确配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 确保覆盖所有jsx/tsx文件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修正后的组件代码 #

<section className="relative py-16 cursor-pointer bg-gray-500">
  <div className="relative h-96 min-w-full">
    <img className="w-full h-full object-contain rounded-2xl" src={img} alt="Not Found" />
  </div>

  <div className="absolute top-32">
    <h3>{title}</h3>
    <p> {description} </p>
  </div>
</section>

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