代码之家 › 专栏 › 技术社区 › chichi

图像组件会缩小宽度和高度,使所有内容都适合屏幕宽度,而不是使其可滚动

tailwind-css next.js

chichi · 技术社区 · 7 月前

随着项目数量的增加,图像会缩小。我如何确保图像的宽度和高度为500px,并确保其水平滚动?

<ul className="flex flex-row w-screen overflow-x-auto">
  {data.map((item, index) => (
    <li key={index} className="w-500">
      <Image src={data.pic} width={500} height={500} alt="" />
    </li>
  ))}
</ul>

1 回复 | 直到 7 月前

Jap Mul 7 月前

添加 shrink-0 以防止项目缩小。所以类似于:

<li className="w-500 shrink-0">

推荐文章

daniel sas · NextJS和React无法读取未定义的属性,element.map不是函数

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Demonix · React Firebase onSnapshot为映射函数返回null

2 年前

wannnwdooo · Nextjs中的图像

2 年前

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Rohit Jambhulkar · 在javascript中使用情绪/样式时出现服务器错误

2 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

2 年前

bami · 动态SSG页需要getStaticPaths,而地址缺少getStaticPaths

2 年前

YaddyVirus · NextJS API中where子句中的未知列

2 年前

m m · 获取未定义或承诺{<pending>}尝试推送到数组[重复]

2 年前