在 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'，请对 textClass='small' 的所有 3 个实例执行此操作以查看大小更改

---

这是我正在使用的代码

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% 添加到您的班级.my-grid。