6.Работа с изображениями на 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”>
Одновременно ширина и высота
Если задать одновременно и ширину, и высоту, то картинку можно исказить. Например, если задать ширину 100 пикселей, а высоту 70px, то наш смайл станет растянутым по ширине:
<img src=”smile.png” width=”100” height=”70”>
Картинка не обязательно исказится, ведь мы можем просто задать и ширину, и высоту по 100 пикселей, в этом случае наша картинка станет меньше, чем была (а была она 130), но пропорции ее не исказятся:
<img src=”smile.png” width=”100” height=”100”>