调整CSS网格内盖茨比背景图像内的文本大小可调整整个图像的大小

我有我的背景图像，上面有一些文字

我试图使文本更小，但当我使用CSS调整文本大小时

.titleSize{
    font-size: 0.8em;
}

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

---

下面是一个最小可重复性示例

您必须使用

warn install

或

npm install

安装节点模块，然后运行

gatsby develope

并在浏览器中查看

localhost:8000

的网页

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

---

这是我正在使用的代码

从“React”导入React
从“盖茨比”导入{Link，graphql，useStaticQuery}
从“盖茨比背景图像”导入背景图像
导入“../style.css”
常量BgImage=（{className，imgProps，textClass}）=>(
数学考试怎么样？
)
常量索引页=（）=>{
常量数据=useStaticQuery（graphql`
查询我的查询{
阿利马夏普{
边缘{
节点{
流质{
尺寸
src
srcSet
srcSetWebp
}
}
}
}
}
`)
const imgProps=data.allImageSharp.edges[2].node.fluid
返回(
)
}
导出默认索引扩展

.container{
宽度：100%；
显示器：flex；
}
.旁边{
宽度：50%；
}
.我的网格{
高度：400px；
显示：网格；
栅隙：10px；
网格模板：重复（3，1fr）/重复（2，1fr）；
网格模板区域：
“u u”
“u u”
“d t”；
宽度：自动；
填充：20px；
}
.联合国{
网格面积：u；
}
杜先生{
网格面积：d；
}
环球航空公司{
网格面积：t；
}
.bgImage{
宽度：100%；
身高：100%；
}
.小{
页边顶部：自动；
字号：0.8em；
}
.大{
页边顶部：自动；
}
.外部{
显示器：flex；
身高：100%；
弯曲方向：立柱；
证明内容：柔性端；
对齐项目：柔性端；
文本对齐：右对齐；
}

网格的宽度根据字体大小而变化。尝试将

width:50%

添加到您的类

。我的网格
请添加一个@0stone0确保它位于此Github repo上。这可能更像是我意识到的css网格问题有没有办法避免增加宽度：50%？无论发生什么，
width:auto
都会这样吗？不，
width:auto
不会起作用。网格元素位于带有
显示：flex的容器中。如果希望其子元素具有相同的宽度，则必须为两个元素指定相同的宽度。当您的div的文本占屏幕的50%时，网格div可能会自动完成为其他50%的大小，但只有当textsize不是0.8em时才会自动完成。它的宽度为
width:50%
，其同级也必须具有
width:50%
，才能获得相同的宽度。