# Работа с изображениями на HTML

Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег `<img>`, имеющий обязательный атрибут `src`, в котором следует задавать путь к файлу картинки. При этом сам тег не требует закрывающего тега.

Давайте посмотрим на примере. Пусть в корневой папке нашего сайта находится файл `smile.png` с картинкой. Давайте выведем ее на странице нашего сайта:

`<img src="smile.png">`

:

Разместите на странице вашего сайта какую-нибудь картинку.

## Ширина картинки

По умолчанию картинки отображаются своим реальным размером. Например, та картинка со смайлом, которую мы выводили выше, имеет реальный размер `130` на `130` пикселей и такой же размер картинки мы и видим в браузере.

При желании можно изменить размер картинки, задав ей ширину. Это делается с помощью атрибута `width`

Давайте для примера зададим нашей картинке ширину `100` пикселей. Для этого значением атрибута `width` укажем число `100`, вот так: `width`="100".

Какого же размера будет картинка на экране? Можно подумать, что следующая: ширина `100` пикселей, как мы задали, и реальная высота `130`, так как мы ее не задавали. На самом деле, это будет не так.

Ширина действительно будет `100` пикселей, а вот высота подстроится так, чтобы пропорции картинки не исказились, то есть также станет `100` пикселей.

Давайте запустим и убедимся в этом:

`<img src="smile.png" width="100">`

:

Установите вашей картинке ширину в `300` пикселей.

## Высота картинки

Можно вместо атрибута `width` написать атрибут `height` - в этом случае уже высота будет задана как `100` пикселей, а ширина подстроится под нее так, чтобы не исказить пропорции:

`<img src="smile.png" height="100">`

:

Установите вашей картинке высоту в `100` пикселей.

## Одновременно ширина и высота

Если задать одновременно и ширину, и высоту, то картинку можно исказить. Например, если задать ширину `100` пикселей, а высоту `70px`, то наш смайл станет растянутым по ширине:

`<img src="smile.png" width="100" height="70">`

:

Картинка не обязательно исказится, ведь мы можем просто задать и ширину, и высоту по `100` пикселей, в этом случае наша картинка станет меньше, чем была (а была она 130), но пропорции ее не исказятся:

`<img src="smile.png" width="100" height="100">`

:

Установите вашей картинке ширину и высоту так, чтобы пропорции изображения исказились.

Установите вашей картинке ширину и высоту так, чтобы пропорции изображения НЕ исказились.

←→
↑