Как изменить размер картинки в html

Для изменения размера картинки в HTML можно использовать атрибуты width и height тега <img>. Например, чтобы уменьшить размер картинки до 300 пикселей по ширине, можно написать следующий код:

<img src="image.jpg" alt="Картинка" width="300" />

Если нужно изменить размер картинки пропорционально, можно указать только ширину или только высоту, а другое значение будет автоматически рассчитано браузером. Например, чтобы уменьшить размер картинки до 300 пикселей по ширине, а высота менялась пропорционально, можно написать так:

<img src="image.jpg" alt="Картинка" width="300" />

Также можно задавать размеры картинки через CSS, используя свойства width и height. Например:

<style>
  .my-image {
    width: 300px;
    height: auto;
  }
</style>

<img src="image.jpg" alt="Картинка" class="my-image" />

В этом примере мы задаем ширину картинки в 300 пикселей и высоту автоматически рассчитывается браузером, чтобы сохранить пропорции картинки. Картинке также добавлен класс my-image, который мы использовали для применения стилей.

Размер картинки задают атрибутами width и height тега <img> или CSS-свойствами с теми же названиями. Чтобы картинка не исказилась, укажите только ширину, высота подстроится сама:

<img src="cat.jpg" alt="Кот на диване" width="300">

Через атрибуты

<img src="cat.jpg" alt="Кот на диване" width="300" height="200">

Значения пишут без единиц, это пиксели. Если пропорции 300×200 не совпадут с пропорциями файла, картинка растянется.

Атрибуты width и height полезно указывать с реальными размерами файла, даже если размер потом меняет CSS. Браузер заранее оставит место под картинку, и текст не будет прыгать при загрузке.

Через CSS

<img class="photo" src="cat.jpg" alt="Кот на диване">

CSS переопределяет атрибуты width и height.

Уменьшить картинку под размер блока

Чтобы картинка не вылезала за пределы контейнера на узком экране:

img {
  max-width: 100%;
  height: auto;
}

Большая картинка ужмётся до ширины блока, маленькая останется своего размера.

Задать точный размер без искажений

Если нужен квадрат 200×200 из прямоугольного фото:

.avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

object-fit: cover обрежет лишнее. contain покажет картинку целиком с пустыми полями.

Единицы

Размер файла

CSS и атрибуты меняют только размер на экране. Картинка 4000×3000 пикселей загрузится целиком, даже если вы покажете её размером 300px. Для сайта уменьшите сам файл в графическом редакторе или в сервисе сжатия и сохраните в формате WebP.

Работу с картинками и адаптивную вёрстку разбирают на курсе «Профессиональная верстка».