Html 如何根据背景图像动态更改DIV的高度，同时保持文本居中

我正在为我的网站创建一个登录页，并希望其中一个Jumbotrons能给它一种现代感和技术感。我已经设法将文本居中（水平和垂直），现在我正移到背景图像上。我遇到了一个问题，虽然我需要的Div是我的背景图像的高度，而文本仍然在中心。这是我的HTML

<div class="jumbo">
  <div class="jumboCon">
    <h1 class="centre">Kraft, unique</h1>
    <p>The best present is a special one</p>
    <div class="action">
      <p>Search!</p>
    </div>
  </div>
</div>

我读了一些问题和答案，他们建议把图片放在Div中，但我不能这样做，因为我的文本也需要放在中间。太难了，我不会总是知道图片的尺寸，因为这将是人们宣传自己的图片

我想要这种效果。我对JavaScript不是很有天赋，但可能可以复制和粘贴！谢谢

---

尼克

我用这篇便利的文章帮我写了以下内容：。它使用伪元素，例如

：before

，以避免向页面添加额外的标记

我将

#jumbo

更改为

位置：绝对

具有全宽和全高，然后我使用文章的代码将元素居中

.jumbo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/kraft.png);
    text-align: center;
}

.jumbo:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.jumboCon {
    display: inline-block;
    width: 50%;
    margin: 0 auto;
    color: #fcfcfc;
}

---

您还可以使用img元素，让它设置div的大小。然后，内部内容div可以有一个

位置：绝对
和
文本对齐：居中
，它将按照您的需要工作。一个完整的图像作为背景，前面有一个居中的div

这是一个例子：

编辑：

再添加两个div，使用
display:table
effect使其垂直居中
 根据我的评论，如果图像有一个已知的比率

其想法是将长方体和图像设置为相同的比例。然后调整图像的大小，使其位于100%宽度的背景上

带有%垂直填充的伪元素将拉伸长方体以适应比率

使用浮动伪文本，可以将文本居中：

/* center & middle */
.jumbo {
  margin:auto;
  overflow:hidden;
  background:url(http://lorempixel.com/640/480/) no-repeat red;
  background-size:100% auto;
  text-align:center;
}
.jumbo:before {
  content:'';
  padding-top:75%;/* because ratio is 4:3 */
}
.jumbo:before , .jumboCon {
  display:inline-block;
  vertical-align:middle;
}

使用内联块，您可以将内容居中和垂直对齐：

/* center & middle */
.jumbo {
  margin:auto;
  overflow:hidden;
  background:url(http://lorempixel.com/640/480/) no-repeat red;
  background-size:100% auto;
  text-align:center;
}
.jumbo:before {
  content:'';
  padding-top:75%;/* because ratio is 4:3 */
}
.jumbo:before , .jumboCon {
  display:inline-block;
  vertical-align:middle;
}


注意：图像将保持其比例，长方体可能会变得更高，屏幕或窗口比例可能不匹配。
图像是否有您知道的比例？您会使用背景尺寸来覆盖容器宽度或高度上的图像吗？？？这就是我的意思：你能把背景图像做成页面的全宽，然后把文本放在中间吗？像这样？或者像这样，有没有办法将文本垂直居中？是的，但它会添加2个以上的div。您必须将文本包装到
display:table
div以及
diplay:table单元格中。然后属性
vertical align:middle
将适用于您。我在答案中添加了一个提琴手，显示…但是文本居中如何？谢谢，我将在我的网站中使用它-+1