我在我的GatsbyJs博客中使用@Body(SimplePipe) body渲染带有减价的图像。
我在我的gatsby-config.js文件中使用以下配置：
gatsby-transformer-remark我的图像比宽的图像高3倍。这样，它们占用了太多空间。
当我添加一个{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 500,
wrapperStyle: `text-decoration: none; background-image: none;`,
quality: 75,
showCaptions: true
}
}
]
}
},
属性时，我会得到一个裁剪的结果-相反，我想像CSS那样包含一个包含结果：
background-size：包含;
我发现此插件采用与maxHeight相同的参数，但是即使在那儿，我也找不到一种以包含方式呈现图像的方法。
答案 0 :(得分：1)
我经常发现自己与gatsby-image处于同一情况。
我个人处理此问题的方法是使用CSS并在包裹在object-fit中的contain上添加img作为gatsby-image-wrapper。这会将图片包含到包含元素的高度或宽度。
.gatsby-image-wrapper img {
object-fit: contain !important; // !important to override the element style
}
您还需要确保包装gatsby-image的元素具有position: relative或固定大小，以停止图像的任何overflow。