Как масштабировать картинку в CSS

Вы можете масштабировать (увеличивать или уменьшать размеры) картинки в CSS при помощи свойства width или height. При этом, если вы меняете значение одного из этих свойств, то другое будет изменяться пропорционально, чтобы сохранить пропорции картинки.

Использование только свойства width:

img {
  width: 50%; /* уменьшает размер картинки до 50% от оригинального */
}

Использование только свойства height:

img {
  height: 200px; /* устанавливает высоту картинки в 200 пикселей */
}

Использование одновременно свойств width и height (если задать только одно из этих свойств, то другое будет изменяться пропорционально):

img {
  width: 50%; /* уменьшает размер картинки до 50% от оригинального */
  height: auto; /* вычисляет высоту для сохранения пропорций */
}

Использование свойства object-fit (которое устанавливает способ заполнения области, занимаемой элементом img):

img {
  width: 200px; /* устанавливает ширину картинки */
  height: 200px; /* устанавливает высоту картинки */
  object-fit: cover; /* заполнить область элемента */
}

Использование свойства background-size для масштабирования фоновой картинки или картинки заднего фона:

.my-div {
  background-image: url(my-background-image.jpg);
  background-size: contain; /* масштабировать картинку таким образом, чтобы она целиком поместилась внутри блока (.my-div) */
}

Использование медиа-запросов для изменения размера картинки на различных устройствах:

@media (max-width: 768px) { /* медиа-запрос для устройств с максимальной шириной 768 пикселей */
  img {
    width: 100%; /* увеличивает размер картинки до максимальной ширины экрана */
  }
}

Выберите подходящий способ масштабирования картинки в зависимости от ваших потребностей и добавьте соответствующий код в ваш CSS файл.