Как масштабировать изображение в css?
Как масштабировать изображение в css?
2 ответа
от
anahi_abshire ,
2 года назад
@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 ,
10 месяцев назад
@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% от ширины родительского элемента, сохраняя пропорции изображения.
15