如何自动将div的高度调整到背景图像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何自动将div的高度调整到背景图像？相关的知识，希望对你有一定的参考价值。
我试图在这个网站创建第一部分的效果：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;
}
答案
根据背景图像的大小，不可能扩展元素。
要解决这个问题，我建议将背景图像转换为子<img>元素。在这个<img>元素上，指定先前在容器上的width和height。完全省略父母的height和width，父母将自动扩展到图像的大小。
这可以在以下内容中看到：
.landingPage > img {
width: 100%;
height: 950px;
}<div class="landingPage">
<img src="http://placehold.it/100">
</div>以上是关于如何自动将div的高度调整到背景图像？的主要内容，如果未能解决你的问题，请参考以下文章