Gatsby / Markdown 上连续出现多个图像？

Question

很抱歉，如果这个问题已经被问过，但是有没有办法在 Gatsby 从文件 Markdown 生成的页面中并排放置两个图像（甚至是图像网格）？我开始在盖茨比下创建我的第一个网站，目前，我只能在整个宽度上一次显示一张图像（当我尝试并排复制时，它们将自己放在彼此的顶部。

CSS 上有什么要做的吗？或者配置发生在 gatsby-config.js 中？

如果有人有解决方案:)

非常感谢！！

这是我的 .md 文件中的两个图像

![description](picture.jpg) ![description](picture.jpg)

这是关于我的 gatsby-config.js 的 markdown 部分

    'gatsby-plugin-sharp',
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      'gatsby-remark-relative-images',
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 750,
          linkImagesToOriginal: false
        }
      }
    ]
  }
}

Answer 1

这不是一个干净的解决方案，在 Gatsby 中你可以用 div 容器包装图像。

代码（Markdown）

<div style = "display: flex; justify-content: center;">
  <div style = "width: 250px; 
  margin: 0 1rem;
    margin-bottom : 1.5rem;">
      <img style = "display: inline-block" src = "./6.jpeg">
  </div>
  <div style = "width: 250px; 
  margin: 0 1rem;
    margin-bottom : 1.5rem;">
      <img style = "display: inline-block" src = "./7.jpeg">
  </div>
</div>

---

结果将是：

我希望这对你有帮助:)

Answer 2

基于 Chanmin 的解决方案，这里有一个稍微简单的版本。

<div class="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem;">
  <img src="picture1.jpeg" alt="A picture" />
  <img src="picture2.jpeg" alt="Another picture" />
</div>

不幸的是，因为

gatsby-remark-images

将

margin-left: auto; margin-right: auto;

添加到包装元素以使图像居中，它破坏了网格单元中绝对定位图像所占用的空间。要解决这个问题，我们需要在

wrapperStyle

中设置

gatsby-config.js

。

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 1024,
    wrapperStyle: "margin-left: 0; margin-right: 0;",
  },
},