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

Question

http://hbnam.tumblr.com/

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

我有一组图像，我想做类似

的事情

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

但样式正确。

关于如何做样式的任何线索？

Answer 1

好吧，如果您只对样式方面感兴趣，只需检查元素即可。你会看到他们为实现 "grid" 之类的布局所做的一切都是设置每个图像的高度，然后它们都使用 text-align: center.[=21 以 <body> 标记为中心=]

问题是，在您的示例代码中，您使用的 <div> 默认为 display: block。在该 tumblr 页面上，每张图片都包裹在默认为 display: inline 的 <a> 标签中，因此如果您想继续使用 <div> 包裹每张图片，您需要设置style 属性：style={{display: 'inline'}} 并在包裹 divs/images.

数组的父元素上设置 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>
  );
};

Answer 2

您可以看到图像按行排列，每行有 "randomly" 1,2 或 3 张图像。你提到过，一次获得 15 张图像。如果你显示 15 张图像，没有。每行中的图像设置如下（数字加起来为 15）。

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

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

我想你可以找出代码，但如果我能帮忙的话请告诉我。

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

Given an Array of Images, how do I style the images so that it looks like this ? ( React )

css

reactjs

styled-components

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

Given an Array of Images, how do I style the images so that it looks like this ? ( React )

css

reactjs

styled-components

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