如何使容器固定为h-250/w-200，图片及错误占位框填充该容器？

先看你代码里的核心问题：

• 容器div的高度设为h-[300px]，但你需要的是h-250（对应250px），得先把容器尺寸改成目标固定值
• 图片用h-250 w-200的写法如果是自定义Tailwind类，得确保配置生效；更稳妥的是用w-full h-full让图片直接填满容器，配合object-cover保证图片按比例裁剪覆盖，不会变形

修正后的代码示例 #

<>
  <div className="border-2 border-amber-400 flex-shrink-0 w-[200px] h-[250px]">
    <img
      src={img}
      alt="Background Image"
      className="w-full h-full object-cover"
      onError={(e) => {
        // 加载失败时保证占位框不消失，继承容器尺寸
        e.target.style.display = 'block';
      }}
    />
    Pictureeeee
  </div>
</>

关键说明 #

• 容器必须固定w-[200px] h-[250px]（如果是自定义w-200 h-250类，要在Tailwind配置里添加对应尺寸），这样不管图片加载状态如何，容器都会保持目标尺寸
• 图片用w-full h-full强制适配容器大小，object-cover会让图片按比例填充，超出部分自动裁剪，保证不会拉伸变形
• 图片加载错误时，浏览器默认的占位框（带?的样式）会继承容器的固定尺寸，不需要额外设置就能保持200x250的大小

自定义Tailwind类配置（可选） #

如果想直接用w-200 h-250，需要在tailwind.config.js里添加自定义尺寸：

module.exports = {
  theme: {
    extend: {
      width: {
        '200': '200px',
      },
      height: {
        '250': '250px',
      },
    },
  },
}

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