首页 文章

如何设置background-size：在Gatsbys插件中包含“gatsby-remark-images”

提问于
浏览 次
1

我正在使用 gatsby-transformer-remark 在我的GatsbyJs Blog中使用markdown渲染图像 .

我在我的gatsby-config.js文件中使用以下配置：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 500,
          wrapperStyle: `text-decoration: none; background-image: none;`,
          quality: 75,
          showCaptions: true
        }
      }
    ]
  }
},

我的图像比它们宽3倍 . 这样，它们占用了太多空间 .

当我添加 maxHeight 属性时，我希望像CSS一样包含结果：

background-size：包含;

我发现这个插件采用与 gatsby-plugin-sharp 相同的参数，但即使在那里我也找不到以一种包含的方式渲染图像的方法 .

gatsby

1 回答

  • 1

    我经常发现自己与 gatsby-image 处于同样的境地 .

    我亲自处理这个问题的方法是使用CSS并在 gatsby-image-wrapper 中包含的 contain 上添加 object-fit 作为 contain . 这将包含图像到包含元素的高度或宽度 .

    .gatsby-image-wrapper img {
   object-fit: contain !important; // !important to override the element style
}

    您还需要确保的一件事是包装 gatsby-image 的元素具有 position: relative 或固定大小以阻止图像的任何 overflow .

    回复于

相关问题