html - 使div高度大致保持恒定，但像airbnb一样“响应”

我有以下HTML（http://jsfiddle.net/z0wgza3s/2）：

<div class="header">
    <div class="image">
        <img src="http://placehold.it/2200x800" alt="" />
    </div>
    <div id="menu-all">
        <div class="menu">This is the menu</div>
        <div class="tools">These are the tools</div>
    </div>
</div>
<div class="content">content</div>

以及以下CSS：

.header {
  position: relative;
}
.image {
    position: relative;
    z-index:1
}
#menu-all {
  position:absolute;
  top:0;
  z-index:2
}
img {
  width: 100%;
  height: auto;
  outline: 0;
}

我正在尝试复制Airbnb在其主页上使用的内容。

如果您注意到高度始终恒定...

当浏览器宽度增加时，视频会在顶部裁剪。

当浏览器宽度减小时，视频将在右侧裁剪。

我怎样才能做到这一点？

最佳答案

尝试这个：

<header>
<div id="container">
    <img src="http://placehold.it/2200x800" />
</div>
</header>
<div id="text-container">
   <div id="text-middle">
      <h1>Test title</h1>
      <p>Test text, blah, blah</p>
   </div>
</div>

body {margin: 0; height: 100%; overflow-x: hidden;}
#text-container {position: relative; height: 300px; width: 100%; text-align: center; display: table;}
#text-middle {display: table-cell; vertical-align: middle;}
#container {position: absolute; right: 0; left: 0; top: 0; overflow: hidden;
height: 300px; /*adjust height*/
min-width:  1000px; /* depends on img res.; change to 1px to see */
}
h1, p {font-family: Arial;}
img {bottom: 0; position: absolute; width: 100%;}

在Chrome，Firefox，IE中正常运行。

希望这有助于清理问题。