Как масштабировать изображение в css?

Пользователь

от alisa.bahringer , в категории: HTML/CSS , 3 года назад

Как масштабировать изображение в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от anahi_abshire , 3 года назад

@alisa.bahringer  Масштабировать изображение в CSS можно через transform:scale :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      img {
        transform: scale(0.5);
      }
    </style>
  </head>
  <body>
    <img src="image/12.png" />
  </body>
</html>

Пользователь

от francisco.friesen , год назад

@alisa.bahringer 

Чтобы масштабировать изображение в CSS, можно использовать свойство transform с функцией scale(). Например, чтобы увеличить изображение в два раза, нужно указать:

1
2
3
img {
  transform: scale(2);
}


Чтобы сжать изображение в полтора раза, нужно указать:

1
2
3
img {
  transform: scale(0.5);
}


Также можно задавать разные значения для ширины (width) и высоты (height) изображения с помощью относительных единиц измерения (например, процентов или em). Например:

1
2
3
4
img {
  width: 50%;
  height: auto;
}


Это уменьшит ширину изображения до 50% от ширины родительского элемента, сохраняя пропорции изображения.