HTML/CSS Resize Delema

Question

Я работаю над веб-страницей макета для проекта black friday в классе сообщества.

Я думал, что все в порядке, пока я не понял, что изображение было большим для любого экрана размером менее 1920x1080. Есть ли способ получить изображение для размера в моем div? Возможно, я не объясню это правильно, поэтому я позволю скриншоту и коду говорить сам за себя.

jfiddle здесь: http://jsfiddle.net/Eb9mJ/

*I need code for jfiddle* 

А вот мой аннотированный снимок экрана: http://i.imgur.com/2jLZbov.png

Спасибо, и извините, если я ломать какие-то скрытые правила или что-то с этой должности, я 'm новых на сайт и только один раз опубликовал.

Answer 1

Попробуйте http://www.w3schools.com/cssref/css3_pr_background-size.asp

фон-размер - CSS свойство

Answer 2

Вы можете предназначаться это изображение в CSS и установить ширину или высоту для ваших нужд. Я изменил ваш скрипку http://jsfiddle.net/Eb9mJ/

добавить эти CSS (размеры только для демо-целей)

img.top{ 
    height:100px; 
} 
img.bottom{ 
    height:200px; 
} 

Answer 3

Вы должны сначала удалить размер от родительского контейнера, #cf и изменить правило позиции на static или relative , Затем введите #cf img селектор a width:100% правило.

Демо: http://jsfiddle.net/Eb9mJ/1/

CSS:

#cf { 
    position: relative; /* CHANGED FROM ABSOLUTE */ 
} 

#cf img { 
    position:absolute; 
    left:0; 
    right:0; 
    margin-left:auto; 
    margin-right:auto; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    width: 100%; /*ADD THIS WIDTH SO IT ALWAYS STRETCHES TO THE SIZE OF THE VIEWPORT*/ 
} 

Answer 4

Заканчивать этот образец я сделал:

JS Fiddle Here

Она захватывает пользователей размер экрана при загрузке и изменении размеров, затем адаптируя размер фона соответствует экрану.

$(document).ready(function() { 
    $('html').css({ 
     "background-size": $(window).width() + "px" + " " + $(window).height() + "px" 
    }); 
    $('html').show(); 
}); 

$(window).resize(function() { 
    $('html').css({ 
     "background-size": $(window).width() + "px" + " " + $(window).height() + "px" 
    }); 
});