根據瀏覽器大小設置圖片大小？

Question

當網站第一次加載時，是否可以根據瀏覽器大小來決定圖片/ div的大小？

我有以下告訴div是瀏覽器大小減去下面的內容持有人然而，它不起作用。如果我把這個減號出來，它可以工作，但是到一個隨機的高度而不是瀏覽器的高度。

標題下方顯示的主要網站內容也是一個靈活的高度。

基本上當您加載網站時，無論瀏覽器大小如何，橫幅圖像都應占據整個屏幕。

jQuery(document).ready(function($) { 

    $(document).ready(sizeContent); 

    $(window).resize(sizeContent); 

    function sizeContent() { 
     var newHeight = $("html").height() - $(".site_content").height() + "px"; 
    $(".full_image").css("height", newHeight); 
    } 




}); 

Fiddle here

Answer 1

這?:

function sizeContent() { 
     var newHeight = $(window).height() + "px"; 
     $(".full_image").css("height", newHeight); 
    } 

小提琴：http://jsfiddle.net/31gax1fk/16/

Answer 2

你可以在CSS我相信，隨着大衆/ VH（查看寬/視圖高度）直做到這一點。雖然這會扭曲這張圖片，但如果你只是想讓圖片的20％大小（沒有扭曲），那麼瀏覽器寬度而不是寬度和高度，那麼你可以只是寬度：20％。身高：自動;在你的CSS肯定？

或只是身高：100％;寬度：100％;

Answer 3

，而不是specifing與JavaScript的調整，我認爲你可能會使用CSS3

img { 
    width:100%; 
    max-width:100%; 
    height:auto; 
} 

這也是響應的更好，當瀏覽器大小的變化，它會自動給出了高度的高度和寬度，使圖像沒有按」噸得到拉伸