Установить размер изображения на основе размера браузера?

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, я считаю с Vw/ВХ (вид ширины/высоты вид).

Хотя это исказило бы это изображение, если вы просто пытаетесь сделать изображение на 20% от размера браузера (без искажений), поэтому ширина браузера, а не ширина и высота, тогда вы могли бы просто ширину: 20%; высота: авто; в вашем CSS конечно?

или просто высота: 100%; ширина: 100%;

Answer 3

вместо задав высоту и ширину на изменение размера с JavaScript Я думаю, что вы можете быть лучше использовать CSS3

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

это также реагирует при изменении размера браузера, он автоматически дает высоту, так что изображения Безразлично» т растянуться