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

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

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

:

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

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

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

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

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

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

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

:

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

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

:

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

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

:

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

: