Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором следует задавать путь к файлу картинки. При этом сам тег не требует закрывающего тега.
Давайте посмотрим на примере. Пусть в корневой папке нашего сайта находится файл smile.png с картинкой. Давайте выведем ее на странице нашего сайта:
Задача 1
Разместите на странице вашего сайта какую-нибудь картинку.
Ширина картинки
По умолчанию картинки отображаются своим реальным размером. Например, та картинка со смайлом, которую мы выводили выше, имеет реальный размер 130 на 130 пикселей и такой же размер картинки мы и видим в браузере.
При желании можно изменить размер картинки, задав ей ширину. Это делается с помощью атрибута width
Давайте для примера зададим нашей картинке ширину 100 пикселей. Для этого значением атрибута width укажем число 100, вот так: width="100".
Какого же размера будет картинка на экране? Можно подумать, что следующая: ширина 100 пикселей, как мы задали, и реальная высота 130, так как мы ее не задавали. На самом деле, это будет не так.
Ширина действительно будет 100 пикселей, а вот высота подстроится так, чтобы пропорции картинки не исказились, то есть также станет 100 пикселей.
Давайте запустим и убедимся в этом:
Задача 2
Установите вашей картинке ширину в 300 пикселей.
Высота картинки
Можно вместо атрибута width написать атрибут height - в этом случае уже высота будет задана как 100 пикселей, а ширина подстроится под нее так, чтобы не исказить пропорции:
Задача 3
Установите вашей картинке высоту в 100 пикселей.
Одновременно ширина и высота
Если задать одновременно и ширину, и высоту, то картинку можно исказить. Например, если задать ширину 100 пикселей, а высоту 70px, то наш смайл станет растянутым по ширине:
Картинка не обязательно исказится, ведь мы можем просто задать и ширину, и высоту по 100 пикселей, в этом случае наша картинка станет меньше, чем была (а была она 130), но пропорции ее не исказятся:
Задача 4
Установите вашей картинке ширину и высоту так, чтобы пропорции изображения исказились.
Задача 5
Установите вашей картинке ширину и высоту так, чтобы пропорции изображения НЕ исказились.
