用空 <div> 填补菜单栏空间

Question

在此网站中，黑色菜单栏占用了图片的顶部。 我想放置一个空的<div>向下推图片。 <div>高度需要自动调整大小，以防止空白以不同的分辨率出现。

我尝试使用vmin / vmax添加空的<div>无效。

JSFiddle链接

菜单栏

    <header id="header">
    <div class="top-bar">
        <div class="container">
            <div class="row">
            </div>
        </div><!--/.container-->
    </div><!--/.top-bar-->

    <nav class="navbar navbar-inverse" role="banner">
        <div class="container">
            <div class="navbar-header">
            </div>

            <div class="collapse navbar-collapse navbar-right">
            </div>
        </div><!--/.container-->
    </nav><!--/nav-->
</header><!--/header-->

Answer 1

该图像在固定大小的div上用作“背景图像”。 一些优点是加载时间，并且无法选择或拖动图像。 缺点是不灵活。 正如您在检查元素时所看到的，并不是黑条与图像重叠，而是div本身切断了图像的一部分。 最好的办法是仅使用完全适合容器的标头图像，或者可以使用CSS background-size播放。 看一下cover ，但是知道cover在旧版浏览器中不起作用。