Используйте CSS, чтобы увеличить или уменьшить изображение

Question

У меня есть изображение в шапке моего сайта. Я хотел бы использовать свойство CSS, чтобы оно растягивалось по ширине браузера, чтобы оно реагировало на то, что пользователь настраивает размер окна браузера, и чтобы вертикальная ось изображения масштабировалась соответствующим образом. Это действительно то, что можно сделать?

Answer 1

Проценты сохранят изображение на всю ширину и обновят изображение при изменении размера браузера.

Если вы хотите, чтобы всегда было растянуто, вы можете использовать:

img {
    width:100%;
}

Однако, это может легко сделать изображение похожим на полную чушь. Более безопасный способ может быть:

img {
    max-width:100%;
}

В любом случае размер изображения будет изменяться при изменении размера браузера. Однако второе не растянет изображение до его естественного размера, поэтому оно не выглядит деформированным.

Answer 2

Здесь, попробуйте, просто примените этот стиль CSS к элементу, который содержит изображение. В этом примере изображение находится на фоне тела страницы:

body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}

Это максимизирует ваше изображение по всему элементу. Изменение размера окна приведет к масштабированию изображения до размера окна нового браузера

Answer 3

CSS, безусловно, может растянуть изображение (или, по крайней мере, я использовал это в Firefox по следующей ссылке: http://www.davidrhysthomas.co.uk/mindez/borked.html):

img {height: 100%;
    width: 100%;
    min-height: 600px;
    min-width: 800px;
    }

например.

Но ... я думаю, что это отреагирует на изменение размера окна просмотра, что JS, вероятно, станет вашим лучшим другом.

Answer 4

Вы можете установить свойства ширины и высоты в процентах (например, ширина 100% приведет к растяжению изображения по всей странице). Это можно сделать с помощью CSS.