Как задать ширину изображения?

Ширина картинки задаётся с помощью атрибута width элемента <img>. Достаточно указать только ширину, высоту же браузер изменит автоматически, исходя из пропорций картинки (пример 1).

Пример 1. Атрибут width

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина</title>
 </head>
 <body>
  <img src="image/spam.jpg" alt="Спам" width="500">
 </body>
</html>

Через атрибут width можно задавать произвольное значение, при этом как увеличивать изображение, так и уменьшать его. Это обычно делается для повышения качества картинки на дисплеях Retina.

Через стили удобно задавать размер сразу для множества изображений. Сперва добавляем к <img> желаемый класс, а в нём пишем свойство width с указанной шириной.

Пример 2. Свойство width

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина</title>
  <style>
   .w { width: 500px; }
  </style>
 </head>
 <body>
  <img src="image/spam.jpg" alt="Спам" class="w">
 </body>
</html>

В данном примере к <img> добавляется класс w, в котором задана ширина 500 пикселей.

Изображения