Изменение размера изображения до определенного процента исключительно с помощью CSS

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

Можно ли изменить размер изображения с помощью процентов CSS?

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

Метод 1: визуальное изменение размера с трансформацией

Этот метод визуально уменьшает размер изображения, не затрагивая его реальные размеры. Этот метод использует свойство Transform: Scale() для сжатия изображения на указанный процент. Изображение остается по центру своих исходных размеров.

Пример:

img {
  transform: scale(0.5);
}