Как сделать картинку на всю ширину?

Чтобы картинка масштабировалась вместе с шириной окна браузера нужно выполнить два действия:

  1. добавить <meta> с именем viewport внутрь <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. через свойство width установить ширину 100% для селекторов img

    img {
  width: 100%;
}

Старые версии браузеров могут вносить искажения в картинку, сохраняя исходную высоту изображения и тем самым неверно вычисляя пропорции. Для таких браузеров рекомендуется добавить свойство height со значением auto.

Теперь при изменении размеров окна браузера картинка будет занимать всю доступную ей ширину (пример 1).

Пример 1. Ширина изображения

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Изображение</title> <style> img { width: 100%; /* Ширина */ height: auto; /* Высота */ } </style> </head> <body> <img src="image/playfulcat.jpg" alt="Котик"> </body> </html>
Изображения