Как пропорционально уменьшить картинку в css?
2 ответа
от
madelyn_hintz ,
2 года назад
@linnea Для того чтобы пропорционально уменьшить картинку в css нужно указать нужный размер width для вас а height указать auto :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> img { width: 100px; height: auto; } </style> </head> <body> <img src="image/11.jpeg" /> </body> </html> |
от
bart ,
10 месяцев назад
@linnea
Для уменьшения картинки в CSS можно использовать свойство transform и его функцию scale, которая изменяет масштаб элемента. Пример:
1 2 3 |
img { transform: scale(0.5); /* уменьшаем картинку в два раза */ } |
Также можно задать значение для свойства width или height, но в этом случае картинка будет масштабироваться не пропорционально, если не задать одновременно оба значения. Пример:
1 2 3 4 |
img { width: 50%; /* уменьшаем ширину картинки до 50% от исходной */ height: auto; /* сохраняем пропорции */ } |
15