如何固定Image组件宽高为500px并实现横向滚动？

要实现图片固定500px宽高且支持横向滚动，只需修正代码里的几个关键问题：

• 修正Tailwind宽度类名：Tailwind没有预设w-500类，需用w-[500px]直接指定500px宽度，也可以在tailwind.config.js中自定义该类。
• 阻止列表项收缩：给<li>添加flex-shrink-0类，避免flex容器压缩子元素宽度。
• 修正图片数据源绑定：代码里的data.pic应该是item.pic，否则会导致所有图片引用同一数据源。
• 确保图片不缩放：如果是Next.js的Image组件，可添加object-cover类保证图片按比例填充容器且不变形；原生<img>标签直接设置宽高属性即可。

修正后的代码如下：

<ul className="flex flex-row w-screen overflow-x-auto">
  {data.map((item, index) => (
    <li key={index} className="w-[500px] flex-shrink-0">
      <Image 
        src={item.pic} 
        width={500} 
        height={500} 
        alt="展示图片"
        className="object-cover"
      />
    </li>
  ))}
</ul>

补充说明：overflow-x-auto会在列表内容超出屏幕宽度时自动显示横向滚动条，完全符合需求。

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