如何自动将div的高度调整到背景图像？

Question

我试图在这个网站创建第一部分的效果：https://www.bandainamcoent.com/games/dragon-ball-fighterz#

在调整窗口大小时更改div的高度，以便背景图像保持其纵横比，并且位于div底部的链接仍在视图中。

我当前的方法仅在调整大小时调整背景图像的宽度。我在div上设置了一个高度，以便高度不会在内容上崩溃。但是，我想使背景图像确定高度。

.landingPage {
    position: relative; //<--This is only here for some absolutely positioned elements in the div
    height: 950px;
    width: 100%;
    background-image: url(../assets/desktopLandingImage.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

根据背景图像的大小，不可能扩展元素。

要解决这个问题，我建议将背景图像转换为子<img>元素。在这个<img>元素上，指定先前在容器上的width和height。完全省略父母的height和width，父母将自动扩展到图像的大小。

这可以在以下内容中看到：

.landingPage > img {
  width: 100%;
  height: 950px;
}

<div class="landingPage">
  <img src="http://placehold.it/100">
</div>

希望这可以帮助！