По умолчанию картинки отображаются своим реальным размером. Например, та картинка со смайлом, которую мы выводили выше, имеет реальный размер 130 на 130 пикселей и такой же размер картинки мы и видим в браузере.
При желании можно изменить размер картинки, задав ей ширину. Это делается с помощью атрибута width.
Давайте для примера зададим нашей картинке ширину 100 пикселей. Для этого значением атрибута width укажем число 100, вот так: width="100".
Какого же размера будет картинка на экране? Можно подумать, что следующая: ширина 100 пикселей, как мы задали, и реальная высота 130, так как мы ее не задавали. На самом деле, это будет не так.
Ширина действительно будет 100 пикселей, а вот высота подстроится так, чтобы пропорции картинки не исказились, то есть также станет 100 пикселей.
Давайте запустим и убедимся в этом:
<img src="smile.png" width="100">
Результат выполнения кода: