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，父级会自动扩展为图片的大小。

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

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

1 个答案: