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

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

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

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

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

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

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

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

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

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

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

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

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

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

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