如何解决在Gatsby / Markdown上连续显示多个图像?
很抱歉,是否已经提出此问题,但是有没有办法让Gatsby从Markdown文件生成的页面中并排放置两个图像(甚至图像网格)?我开始在盖茨比之下创建我的第一个网站,目前,我一次只能在整个宽度上一次显示一个图像(当我尝试并排复制时,它们会彼此重叠。
在CSS上有事要做吗?还是在gatsby-config.js中进行配置?
如果有人有解决方案:)
非常感谢!
这是我的.md文件中的两个图像
![description](picture.jpg) ![description](picture.jpg)
这是关于我的gatsby-config.js降价的部分
'gatsby-plugin-sharp',{
resolve: 'gatsby-transformer-remark',options: {
plugins: [
'gatsby-remark-relative-images',{
resolve: 'gatsby-remark-images',options: {
maxWidth: 750,linkImagesToOriginal: false
}
}
]
}
}
解决方法
这不是一个干净的解决方案,在Gatsby中,您可以使用div容器包装图像。
代码(降价促销中)
<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>
结果将是:
希望对您有所帮助:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。