创建一个高度可根据 background-image 高度调整的部分

Question

我有 3 个部分，它们的 parents 只是正文，在这种情况下，第 2 部分（菜单）背景大于 100vh。给出 height:auto;行不通，我想根据背景长度（自动）拉伸部分的高度，我不想使用（px、vh、cm 等）给它一个特定的值。我很确定这是简单的答案，但我自己想不通。谢谢

html,body {
 position: relative;
 background: white;
 margin: 0;
 padding: 0;
}

#Home {
 position: relative;
 height: 100vh;
 width: 100vw;
 background-image: url(/images/Header.jpg);
 background-size: cover;
 background-repeat: no-repeat;


}

#Menu {
 display: block;
 position: relative;
 height: auto;
 width: 100vw;
 background-image: url(/images/Menu.jpg);
 background-size: cover;
 background-repeat: no-repeat;
 
}

<html>

 <body>
  <section id="Home"></section>
  
  <section id="Menu"></section>
  
  <section id="Map"></section>

 </body>

</html>

Answer 1

实现此目的的唯一方法是不使用实际背景属性。

正如@Mr Lister 评论的那样：

There is no way for an element to know the height of a background image.

但是，您可以在#menu 部分中使用带有您想要作为背景的图像的 img 标签。然后，创建一个具有绝对定位的容器 div，它将包含您的实际部分的内容。

html,
body {
  position: relative;
  background: white;
  margin: 0;
  padding: 0;
}

#Home {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url(http://i.imgur.com/8tcxHWh.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#Menu {
  display: block;
  position: relative;
  width: 100vw;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
}

h2 {
  color: white;
  font-size: 4em;
}

<section id="Home"></section>

<section id="Menu">
  <img src="http://i.imgur.com/BF3ty6o.jpg">
  <div class="content">
    <h2>My content</h2>
  </div>
</section>

<section id="Map"></section>

创建一个高度可根据 background-image 高度调整的部分

Creating a section that it's height is adjustable according to the background-image height

css

height