React 图像在移动视图中从 body 容器中删除答案

【问题标题】：React images get cut out of the body container in mobile viewReact 图像在移动视图中从 body 容器中删除
【发布时间】：2021-05-27 07:29:35
【问题描述】：

我正在实现一个带有缩略图的图像滑块，目前在桌面视图上一切正常。但在移动视图中，如果图像超过 3 张，缩略图会从页面正文中删除。滑块图像宽度也不会减小。我该如何解决？

<div style={{display:"flex"}}>
{arr.map(x=>(<img className="thumbnail" src={x.image} alt=""/>))}
</div>

Scss 文件-

. thumbnail {
width:300px;
height:100px
}

我需要按行显示所有缩略图，如果屏幕尺寸变小，图像缩略图会转到下一行。

【问题讨论】：

【解决方案1】：

也许您需要更改相对长度单位。

【讨论】：

【解决方案2】：

添加样式为

{
  display: flex;  
  flex-wrap: wrap;
}

【讨论】：