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

Question

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

表格对我不起作用，因为：

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

Answer 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>