在 CSS-Grid 中调整 gatsby-background-image 中的文本大小会调整整个图像的大小

Question

我的背景图片上覆盖了一些文字。

我试图使文本变小，但是当我使用 CSS

调整文本大小时

.titleSize{
    font-size: 0.8em;
}

它最终调整了整个背景图像的大小

这是 Github 上的 最小可重现示例 。

您必须使用 yarn install 或 npm install 安装节点模块，然后运行 gatsby develop 并在 localhost:8000 查看网页您的浏览器

注意：如果将 textClass='small' 更改为 textClass='big'，请对所有 3 个 textClass='small' 实例执行此操作查看大小变化

这是我正在使用的代码

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import BackgroundImage from 'gatsby-background-image'
import '../style.css'

const BgImage = ({className, imgProps, textClass}) => (
  <Link className={className} to='#'>
    <BackgroundImage
      Tag="section"
      role="img"
      className='bgImage'
      fluid={imgProps}
      backgroundColor={`#040e18`}
    >
      <div className='outer'>
        <h2 className={textClass}>How was the math test?</h2>
      </div>
    </BackgroundImage>
  </Link>
)

const IndexPage = () => {

  const data = useStaticQuery( graphql`
      query MyQuery {
        allImageSharp {
          edges {
            node {
              fluid {
                sizes
                src
                srcSet
                srcSetWebp
              }
            }
          }
        }
      }
    `)

    const imgProps = data.allImageSharp.edges[2].node.fluid

    return (
      <div className='container'>
        <div className='my-grid'>
          <BgImage className='un' textClass='small' imgProps={imgProps} />
          <BgImage className='du' textClass='small' imgProps={imgProps} />
          <BgImage className='twa' textClass='small' imgProps={imgProps} />
        </div>
        <div className='my-grid'>
          <BgImage className='un' textClass='big' imgProps={imgProps} />
          <BgImage className='du' textClass='big' imgProps={imgProps} />
          <BgImage className='twa' textClass='big' imgProps={imgProps} />
        </div>
      </div>
    )
}

export default IndexPage

.container{
    width: 100%;
    display: flex;
}

.beside{
    width: 50%;
}

.my-grid{
    height: 400px;
    display: grid;
    grid-gap: 10px;
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    grid-template-areas:
        "u u"
        "u u"
        "d t";            
    width: auto;
    padding: 20px;
}

.un{
    grid-area: u;
}

.du{
    grid-area: d;
}

.twa{
    grid-area: t;
}

.bgImage{
    width: 100%;
    height: 100%;
}

.small{
    margin-top: auto;
    font-size: 0.8em;
}

.big{
    margin-top: auto;
}

.outer{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

Answer 1

网格的宽度根据字体大小而变化。尝试将 width: 50% 添加到您的 class .my-grid.

在 CSS-Grid 中调整 gatsby-background-image 中的文本大小会调整整个图像的大小

Resizing text inside gatsby-background-image inside CSS-Grid resizes the whole image

css

reactjs

css-grid

gatsby

gatsby-image