调整字体大小使我的容器背景图像缩放

Question

我的<section>内有背景图片，内部有<h1>，每当我调整font-size的{​​{1}}时，图片就会缩放到某个点。

我已经取消了<h1>的块级分配，我设置了绝对定位，取消了<h1>以及其他一些东西。有一点可以在不影响line-height的背景大小的情况下增加字体，但现在我无法在不影响背景图像的情况下调整<section>。

守则：

font-size

.mis_banner h1 {
  color: #fff;
  text-align: center;
  line-height: 140%;
  font-weight: bold;
  font-size: 60px;
  display: inline-block;
  width: 49%;
}
.mis_banner {
  background: url(../images/HeroDT.jpg) center bottom no-repeat;
  background-size: cover;
  padding-top: 94px;
}

Answer 1

这是将scale设置为background-size的自然结果。当您将文本大小设置得更大时，容器也需要变得更大以适应文本，并且背景需要变得更大以覆盖容器。

如果您不希望缩放背景，可以删除50px auto，或将其设置为{{1}}等特定数字。