Как задать ширину изображения?
Ширина картинки задаётся с помощью атрибута width элемента <img>. Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки (пример 1).
Пример 1. Атрибут width
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Ширина</title> </head> <body> <img src="image/html5-logo.svg" alt="HTML5" width="250"> </body> </html>
Через атрибут width можно задавать произвольное значение, при этом как увеличивать изображение, так и уменьшать его. Это обычно делается для повышения качества картинки на дисплеях Retina.
Через стили удобно задавать размер сразу для множества изображений. Сперва добавляем к <img> желаемый класс, а в нём пишем свойство width с указанной шириной.
Пример 2. Свойство width
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Ширина</title> <style> .w-250 { width: 250px; } </style> </head> <body> <img src="image/html5-logo.svg" alt="HTML5" class="w-250"> </body> </html>
В данном примере к <img> добавляется класс w-250, в котором задана ширина 250 пикселей.
Автор: Влад Мержевич
Источник: webref.ru