使用空<div>填充菜单栏空间

Question

在this网站中，图片的顶部被黑色菜单栏消耗。我想放一个空<div>来向下推动图片。 <div>高度需要自动调整大小以防止空格以不同的分辨率显示。

我尝试使用vmin / vmax添加空<div>，但没有工作。

JSFiddle link

菜单栏

    <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

图像用作＆＃39;背景图像＆＃39;在具有固定大小的div上。一些优点是加载时间并且无法选择或拖动图像。缺点是缺乏灵活性。并不是说黑色条与图像重叠，正如您在检查元素时所看到的那样，但它本身就是切除部分图像的div。您可以做的最好的事情是只使用完全适合容器的标题图像，或者您可以使用CSS background-size。请查看cover，但要知道cover在旧浏览器中不起作用。