显示右侧有一个大的和两个小的图像

Question

我正在使用 Material-ui-next 并尝试以一种非常特殊的方式创建图像。

   ------  ---------
   |    |  |   | 2 |
   |    |  | 1 |---|
   |    |  |   | 3 |
   ------  ---------

我遇到了一些相当奇怪的问题。

1 - 3 出现在 1 下

2 - 2 和 3 不会填满它们的整个空间（突出显示时，无论图像如何，都只使用了一半的内容空间）

3 - 有时我会得到类似于以下的内容：

   ------  ---------
   |    |  |   | 2 |
   |    |  | 1 |---|
   |    |  |   | 3 |
   |    |  ---------
   ------
in that instance, everything on the right isn't extending all the way down

供您参考，如果您关注此link，那么您将转到 material-ui-next GridList 文档。在Advanced Grid List 下，您将看到一张大图和许多小图。我的目标是简单地水平翻转它。

我已经尝试了以下操作：

  <GridList cols={4} rows={2}>
  {
    media.map((file, i) => (
      <GridListTile style={{ display: 'flex', flexFlow: 'wrap row' }} cellHeight={200} key={i} cols={i===0 ? 3 : 1} rows={i===0 ? 2 : 1}>
        <img src={file.url} />
      </GridListTile>
    ))
  }
  </GridList>

上面导致3出现在2下面

  <GridList cols={2} row={2} className={classes.gridList}>
    {
      <GridListTile cellHeight={200} key={1} cols={2} rows={2}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>
  </Grid>

  <Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
    <Typography style={{ visibility: 'hidden' }}>a</Typography>
    <GridList>
    {
      user && user.Media &&
      <GridListTile cellHeight={200} style={{paddingBottom: 0}}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>
    <GridList>
    {
      user && user.Media &&
      <GridListTile cellHeight={200} key={1} cols={1}>
        <img src={file.url} />
      </GridListTile>
    }
    </GridList>

这解决了问题 1，但问题 2 和 3 仍然存在。

我曾尝试使用原生 flex-box，但每次执行时，应该更大的图像都会转换为其他图像的大小。

这是我用于 flex-box 的 css（确实很少）。

gridContainer: {
    display: 'flex',
    flexFlow: 'row',
    justifyContent: 'space-around',
    margin: '3rem 0'
},

---

编辑 - 新

下面的效果比上面的任何东西都好。两个小的侧面图像完美地工作，并且会随着屏幕改变大小。大图像不会并且将完全固定。

新的 CSS

gridList: {
    transform: 'translateZ(0)',
    display: 'flex',
    justifyContent: 'left',
    alignItems: 'left',
    overflow: 'hidden',
    '& img': {
      flexShrink: 1,
      minWidth: '200%',
      minHeight: '200%'
    }
  },
  gridListSmall: {
    transform: 'translateZ(0)',
    display: 'flex',
    justifyContent: 'left',
    alignItems: 'left',
    overflow: 'hidden',
    '& img': {
      flexShrink: 0,
      minWidth: '100%',
      minHeight: '100%'
    }
  },

新的 HTML/JSX

       <div cols={2} row={2} className={classes.gridList}>
        {
          <div cellHeight={200} key={1} cols={2} rows={2}>
            <img src={file.url} />
          </div>
        }
        </div>
      </Grid>

      <Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
        <Typography style={{ visibility: 'hidden' }}>a</Typography>
        <div>
        {
          user && user.Media &&
          <div cellHeight={200} style={{paddingBottom: 0}}>
            <img src={file.url} />
          </div>
        }
        </div>
        <div>
        {
          user && user.Media &&
          <div cellHeight={200} key={1} cols={1}>
            <img src={file.url} />
          </div>
        }
        </div>

Answer 1

保留您指向Advanced Grid List的示例的来源

看看这一行：

<GridListTile 
  key={tile.img}
  cols={tile.featured ? 2 : 1}
  rows= {tile.featured ? 2 : 1}>

所有精选图片占据 2 列 2 行。

您希望您的特色图片为 1 列 x 2 行，因此您需要将这个 cols={tile.featured ? 2 : 1} 更改为这个 cols={tile.cols || 1}。

您可以指定网格列表有多少列：

<GridList cols={2}>

您可以设置单元格高度：

<GridList cellHeight={160}>

而且你可以改变整个网格的属性：

const styles = theme => ({
  gridList: {
    width: 500,
    height: 450,
  }
});

一种更灵活的方法是将行设置为rows={tile.rows || 1}。

现在，你可以控制每张图片可以占据多少列和多少行

const tileData = [
{
    img: image,
    title: 'Image' // no rows or columns means 1x1
},
{
    img: image,
    title: 'Image',
    rows: 2 // 2 rows 1 column
},
{
    img: image,
    title: 'Image',
    cols: 2 // 1 rows 2 columns
},
{
    img: image,
    title: 'Image',
    rows: 2,
    cols: 2 // 2 rows & 2 columns
},

---

回答您的新编辑

我认为你把你的元素混合得很糟糕。 网格的结构是：

• 网格容器 = 带有 classes.root 的 div
  • GridList = <GridList> 与 classes.gridList 和 cellHeight 道具
    • GridListTile = <GridListTile> 与 cols 和 rows
      • 你的形象
      • 其他一些内容
    • GridListTile = <GridListTile> 与 cols 和 rows
      • 你的形象
      • 其他一些内容

<GridListTile> 确定您的图像所需的大小，并且是唯一需要用图像填充的大小。这可以是 1x1、1x2、2x1...

在您的代码中，我看到div 和cols 和rows，div 和cellHeight，结构不完整（我看不到整个树）...我无法制作任何感觉。

---

问题

• 您是否使用了示例中提到的组件？
• 除了这 3 张图片之外，您还需要更多吗？

---

提示

您提到的组件不能保证图像的确切顺序，它们会重新排序以填充所有单元格。

Answer 2

在创建此答案时，我使用了 Valentin 在问题中发布的建议以及帖子中的 cmets。我最终放弃了GridList，而只使用了 Flexbox。

html/jsx

            <Grid item xs={12} md={8} style={{paddingRight: 0}}>
              <Typography type="body2">Media</Typography>

                <div>
                {
                  <div className={classes.gridListContainer}>
                    <div className={classes.gridList} style={{width: '70%'}}>
                      <img
                        src={media.url[0]}
                        alt={media[0].name}
                      />
                    </div>
                    <div className={classes.gridListSmall} style={{width: '30%'}}>
                      <img
                        src={media.url[1]}
                        alt={media[1].name}
                      />
                      <img
                        src={media.url[2]}
                        alt={media[2].name}
                      />
                    </div>
                  </div>
                }
                </div>

css

  gridListContainer: {
    display: 'flex',
    flexFlow: 'row'
  },
  gridList: {
    transform: 'translateZ(0)',
    alignItems: 'stretch',
    overflow: 'hidden',
    '& img': {
      width: '100%',
      height: '100%',
    }
  },
  gridListSmall: {
    transform: 'translateZ(0)',
    // flexFlow: 'column',
    justifyContent: 'left',
    alignItems: 'stretch',
    overflow: 'hidden',
    '& img': {
      flexShrink: 0,
      height: '50%',
      verticalAlign: 'middle'
    },
    '& div img': {
      flexShrink: 0,
      height: '50%',
      verticalAlign: 'middle',
      content: 'words'
    }
  }

它创建了我想要的完美形状，如下所示。它应该只容纳 3 张图片，所以这就是我调用索引的原因。

   ---------
   |   | 2 |
   | 1 |---|
   |   | 3 |
   ---------