Как сжать картинку в CSS

CSS не предназначен для сжатия картинок, но есть несколько способов, как можно изменить размеры картинок с помощью CSS.

1. Свойство width — позволяет изменять ширину картинки. Например:

img {
  width: 50%;
}

Этот код уменьшит ширину картинки до 50% от ее исходного размера.

2. Свойство height — позволяет изменять высоту картинки. Например:

img {
  height: 150px;
}

Этот код установит высоту картинки в 150 пикселей.

3. Свойства max-width и max-height — позволяют задавать максимальные размеры для картинок. Например:

img {
  max-width: 100%;
  max-height: 200px;
}

Этот код установит максимальную ширину картинки в 100% от ширины родительского элемента и максимальную высоту в 200 пикселей.

4. Свойство object-fit — позволяет задавать способ масштабирования картинки внутри ее контейнера. Например:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

Обратите внимание, что изменение размеров картинки с помощью CSS может сильно ухудшить качество изображения. Если вы хотите сжать картинку, лучше использовать специальные инструменты, такие как Adobe Photoshop, онлайн-сервисы или программы для сжатия изображений.