markdown - 如何在 Gatsby 网站的 Markdown Mdxjs 中响应式地并排添加图像?
问题描述
我想使用 Markdown Mdxjs(对于 Gatsby 网站)响应式地并排放置图像。
表格对我不起作用,因为:
- 有必要为列添加标题(我只想显示图像,没有文字)。
- 它对移动设备没有响应(如果图像太大,它们应该显示在下一行)
- 无法调整图像大小
解决方案
您可以将自定义反应组件的对象传递给您的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>
推荐阅读
- istio - 如何通过 Minikube/Windows 上的 Istio 中的 Gateway 或 Ingress 访问 hello world Java 微服务?我被困了几个小时/几天/几周
- reactjs - 尝试通过 Apollo Query 和 Formik 在 React 渲染道具中使用函数时的 Typescript TS2349
- three.js - 如何以编程方式撤消到枢轴点的位置转换?
- java - 是否可以在不使用 JavaMail api 对端口进行硬编码的情况下连接到邮件服务器,基本上代码应该独立于端口。?
- c# - 如何在异步函数中发送参数值
- mysql - 创建kafka连接器时,使用localhost:8083,总是报错:curl(7) connection denied
- vb.net - Visual Studio 2010 @ 高 DPI
- reactjs - 如何从子组件中获取父级中的值(来自输入)
- php - 从两个不同的多维数组中获取唯一值
- cmake - 在柯南 cmake 配置中包含路径错误