Щоб змінити розмір зображення в html засобами css використовуються властивості width(ширина) та height(висота) усередині атрибуту style. Ви можете написати тільки width або height, і невказане значення автоматично зміниться зі збереженням пропорцій картинки.
Щоб вставити зображення за допомогою<img> , потрібно додати в тег чотири обов'язкові атрибути:
- src — вказує шлях до картинки;
- alt — додає альтернативний текст, який відображається, якщо зображення не завантажено;
- width – задає ширину зображення;
- height – задає висоту зображення.
Щоб встановити такі обмеження для зображень, є два методи:
- використання властивостей min-width та max-width;
- використання стильових функцій min() та max().
Відкрийте зображення з диска та перейдіть в меню Image → Resize/Resample або натисніть клавіші Ctrl + R. У вікні, введіть точні розміри в пікселях, сантиметрах або дюймах, відсоток від вихідної величини картинки або значення в мегапікселях.
Обрізання з використанням object-fit та object-position Ви можете використовувати властивість object-fit у поєднанні з object-position для налаштування області зображення для обрізання . Властивість object-position потребує два значення: x% та y% для позиціонування зображення (за замовчуванням – 50% 50%).
Для розтягування картинки фону на повний екран слід встановити для фону min-height і width з параметром 100%. Якщо встановити min-width зі значенням, яке аналогічне ширині зображення, то фон стискатиметься менше оригінального розміру зображення.
Якщо ви хочете, щоб зображення не розтягувалося в CSS, ви можете використовувати властивість max-width і max-height , щоб обмежити ширину та висоту зображення.
Щоб зменшити зображення на 50%, можна використовувати CSS з властивістю transform . Цей код встановить масштабування зображення на 50% його вихідного розміру. Ви можете налаштувати відсоткове число, щоб зробити його менше або більше за необхідності. До масштабування зображення має ширину 500 пікселів.