用空 <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在舊版瀏覽器中不起作用。