给定一个图像数组，我如何设置图像的样式使其看起来像这样？（反应）答案

【问题标题】：Given an Array of Images, how do I style the images so that it looks like this ? ( React )给定一个图像数组，我如何设置图像的样式使其看起来像这样？（反应）
【发布时间】：2023-03-03 21:39:01
【问题描述】：

http://hbnam.tumblr.com/

访问此网站，您将看到网格中的图像。网格看起来完全随机，但经过进一步检查，我们看到页面是自动分页的，并且图像以每 15 个块的形式出现。但是每个区块仍然是完全不同的。

我有一组图像，我想做一些类似的事情

array.map( ( element, index) => (
  <div **STYLES**>
    <img key={index} src={element} />
  </div>
)

但具有适当的样式。

关于如何做造型的任何线索？

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

如果您只对样式方面感兴趣，只需检查元素即可。您会看到他们为实现类似“网格”的布局所做的一切就是设置每个图像的高度，然后使用text-align: center 将它们全部以<body> 标记为中心。

问题在于，在您的示例代码中，您使用的是<div>，默认为display: block。在该 tumblr 页面上，每张图片都包含在 <a> 标签中，默认为 display: inline，因此如果您想继续使用 <div> 包装每张图片，您需要将 style 属性设置为例如：style={{display: 'inline'}} 并在包装 div/图像数组的父元素上设置 text-align: center。

希望对你有帮助，如果没有，请告诉我。

const Images = ({images}) => {
  const wrapperStyle = {
    textAlign: 'center'
  };
  const imageStyle = {
    display: 'inline'
  };

  return (
    <div style={wrapperStyle}>
      {images.map((image, index) => (
        <div style={imageStyle}>
          <img key={index} src={image} height="300" />
        </div>
      ));}
    </div>
  );
};

【讨论】：

【解决方案2】：

您可以看到图像按行排列，每行“随机”有 1,2 或 3 张图像。您已经提到，一次获取 15 个图像。如果你展示 15 张图片，没有。每行中的图像数量设置如下（数字加起来为 15）。

2、3、1、2、1、3、2、1

将图像居中并将所有图像设置为相同的高度，根据纵横比自动设置宽度，这增加了感知的随机性。

我想你可以找出代码，但如果我能提供帮助，请告诉我。

【讨论】：