如何在 Gatsby 网站的 Markdown Mdxjs 中响应式地并排添加图像？

【问题标题】：How to add images side-by-side responsively in Markdown Mdxjs in a Gatsby site?如何在 Gatsby 网站的 Markdown Mdxjs 中响应式地并排添加图像？
【发布时间】：2020-06-03 11:52:06
【问题描述】：

我想使用 Markdown Mdxjs（对于 Gatsby 网站）响应式地并排放置图像。

表格不适合我，因为：

需要给列添加标题（我只想显示图片，没有文字）。
它对移动设备没有响应（如果图像太大，它们应该显示在下一行）
图片尺寸无法调整

【问题讨论】：

标签： markdown gatsby gatsby-image mdxjs

【解决方案1】：

您可以将自定义反应组件的对象传递给您的MDXProvider，然后在 MDX 文件中使用它们。

import image1 from "./7.jpg"
import image2 from "./6.jpg"
import image3 from "./3.jpg"

## Big ol pupper blep

<cols num="3">
  <image-card src={image1} title="Shooberino waggy">
    Pupperino dat tungg tho floofs big ol doggorino thicc pupperino
  </image-card>
  <image-card src={image2} title="Biscit corgo">
    Maximum borkdrive floofs very jealous pupper
  </image-card>
  <image-card src={image3} title="Long bois shoob">
    What a nice floof
  </image-card>
</cols>

【讨论】：