容器應該自動調整到背景圖像的高度，以便響應式設計css只有

我在設計響應式設計。
如果我用圖像標籤加載圖像，我沒有問題的大小，但它也會加載在屏幕上，即使我設置顯示：無。這導致在智能手機設備上加載問題...
這樣我試圖縮放它與背景大小：包含，但問題是我必須爲容器添加一個高度。
這意味着如果我有不同寬度的設備，圖像不適合更多。
與background-size相同的問題：封面。如果我改變寬度，圖像流過。
只會用CSS來做，因爲有很多圖片，這導致加載問題與JavaScript。容器應該自動調整到背景圖像的高度，以便響應式設計css只有

#header { 
    width: 100%; 
    background-image:url(../images/backgrounds/Header_phone2.jpg); 
    background-size:contain; 
    background-repeat:no-repeat; 
    min-height: 200px; 
}

編輯
我與JS在答案的解決方案，完善的竅門，歡迎

來源

2016-02-22 delato468

你在這裏有什麼問題？ –

容器的高度應自動調整爲背景圖像的高度。我現在改變了問題標題。 Sry爲我的英語不好。我希望現在更清楚。 – delato468

你不能這樣做沒有JavaScript。 –

我現在的東西，有什麼工作對我來說很好。
我對jquery不太好，這種方式我期待着改進tipps。

HTML：
容器，容器...

的CSS幾乎保持不變：

#header { 
    height:auto; 
} 
#header-image{ 
    width: 100%; 
    min-height: 155px; 
    background-image:url(../bilder/backgrounds/Header_phone2.jpg); 
    background-size:cover; 
    background-repeat:no-repeat; 
    }

的Jquery：

if ($(window).width() <= 966) { 
    var screenwidth = $(window).width(); 
    var heightimage = (screenwidth /940) * 198; 
    $("#header-image").css("height", heightimage); 
} 

    $(window).resize(function() { 
    if ($(window).width() <= 966) { 
     var screenwidth = $(window).width(); 
     var heightimage = (screenwidth /940) * 198; 
     $("#header-image").css("height", heightimage); 
    } 
    });

這是工作太棒了！就像你用img標籤添加圖像一樣，圖像不會加載屏幕設計。（look there）
如果javascript禁用設置min-heigth，則會顯示圖像。
用jquery我計算圖像的高度。爲此，我從顯示器中取出寬度，並將其除以圖像寬度，並將其與圖像的高度相乘。 =>容器的正確高度。
使用窗口大小調整功能，您可以更改窗口的大小，並且它仍然有效。

這很簡單，對我很好。

Click for Jsfiddle.

如果您使用js腳本從img標記中刪除src路徑，那麼它也會發送一個請求。有了這個變體，你就不會有問題，請看第一個鏈接。

一些技術嫺熟的人可以改善這一點：用jquery選擇圖像的寬度和高度並製作一個函數。

來源

2016-02-24 17:32:34 delato468

容器應該自動調整到背景圖像的高度，以便響應式設計css只有

回答

相關問題