Как увеличить изображение 100% ширины страницы, чтобы сохранить фиксированную высоту

Question

Я хотел бы, чтобы изображение охватывало всю ширину веб-страницы (от 980 пикселей до 2000 пикселей). Когда я просто указываю ширину: 100% к изображению, то для поддержания соотношения сторон высота изображения также становится довольно большой для экранов большого размера.

<img src="imageFileName.jpg" width=100% /> 

Чтобы избежать проблемы высоты, я видел, что многие веб-сайты штобы изображения, ширина остается на 100% веб-страницы, и они держат высоту фиксированы.

Может кто-нибудь скажет мне, как увеличить изображение, чтобы я мог сохранить высоту изображения неподвижным, а также увеличить изображение до 100% ширины страницы. Часть масштабирования поможет с сохранением соотношения сторон.

Если есть только css решение, которое будет действительно здорово. Спасибо. (Я не смог найти ответ по поиску Google, поэтому разместил здесь вопрос)

Answer 1

Создайте элемент div с желаемым с и высотой. Затем установите изображение в качестве фона этого div. Затем вы можете охватить фон по своему усмотрению.

div { 
    background: url(img_flwr.gif); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Answer 2

вы можете использовать JQuery, чтобы фиксировать изображение 100% высоты

<img src="imageFileName.jpg" width=100% id="image"/> 


function img_height() 
{ 
    $("#image").height($(window).height()); 
} 

$(window).scroll(img_height); 
$(window).resize(img_height); 

вы также можете использовать $("#page_width").height() вместо $(window).height()