Как правильно добавить обработанное изображение 'gatsby-image' в качестве фона столбца - PullRequest
Новая
       17

Как правильно добавить обработанное изображение 'gatsby-image' в качестве фона столбца

0 голосов
/ 19 декабря 2018

На моем сайте GatbsyJS я использую плагин 'gatsby-image' для обработки изображений.Используя Bulma в качестве фреймворка CSS, я создал макет с двумя столбцами и пытаюсь использовать обработанное изображение «gatsby-image» в качестве фона для первого столбца.

Я могу успешно запросить изображение, создать с ним компонент и поместить компонент в первый столбец.Тем не менее, изображение растягивается, чтобы покрыть второй столбец два.

Вот код компонента: 

import React from 'react'
import Img from 'gatsby-image'
import { StaticQuery, graphql } from 'gatsby'


const SidebarImage = () => (
    <StaticQuery
        query={imgQuery}
        render={data => (
            <Img
                fluid={data.SidebarImgEnt.childImageSharp.fluid}
                style={{
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                }}
            />
        )}
    />

  )

export default SidebarImage

export const imgQuery = graphql`
    query {
        SidebarImgEnt: file(relativePath: {eq: "sidebar.jpg"}) {
            childImageSharp {
                fluid(maxWidth: 1500) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }
`

и это расположение столбцов: 

...
return (
<Layout>
    <div class="columns is-centered">
      <div class="column is-5">
          <SidebarImage />
        <section class="hero is-fullheight-with-navbar">
          <div class="hero-body">
              <div class="container">
                  <h1 class="title is-top">
                      {category}
                  </h1>
              </div>
          </div>
          <div class="hero-foot">

          </div>
        </section>    
      </div>

      <div class="column is-7 is-primary">
      ...
      </div>
  ...

Такпроблема в том, что SidebarImage не остается внутри первого столбца, но охватывает и второй столбец.

Кто-нибудь обнаружил ошибку?

Спасибо!

...