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

Чтобы указать размер картинки в CSS, можно использовать свойства «width» и «height». Кроме того, можно указать как абсолютные значения (например, пиксели), так и относительные (например, проценты) в зависимости от конкретной задачи.

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

img {
  width: 300px;
  height: 200px;
}

Если же нужно задать размеры картинки в процентах от размеров её контейнера (например, чтобы картинка занимала всю ширину экрана), можно использовать такой код:

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

Этот код устанавливает ширину картинки в 100% ширины контейнера, а высоту автоматически рассчитывает пропорционально, чтобы изображение не искажалось.

Можно также использовать одно из свойств (width или height) и задать только его значение, а другое свойство может быть установлено «auto». Например:

img {
  width: 300px;
  height: auto;
}

Этот код установит ширину картинки в 300 пикселей, а высота будет рассчитана автоматически пропорционально ширине.