Масштабування картинок, webreference
Якщо для елемента не поставити атрибути width і height. то браузер самостійно визначить ширину і висоту зображення після завантаження файлу і покаже його в початковому розмірі. Малюнок у форматі SVG браузери, за винятком IE, виводять на всю доступну ширину.
Зміна масштабу і пропорцій зображення робиться як через атрибути . так і через стилі.
Використання атрибутів
Будь-яку картинку можна як збільшувати, так і зменшувати в розмірах, задаючи значення висоти або ширини в пікселях або відсотках від розміру батька. Якщо встановлена тільки ширина або висота, то друга величина обчислюється автоматично виходячи з пропорцій картинки. Два заданих значення можуть спотворити пропорції, особливо якщо вони задані невірно. У прикладі 1 показані різні варіанти завдання розмірів в пікселях.
Приклад 1. Розміри в пікселях
У прикладі використовувалася одна і та ж фотографія, для першого розміри явно не вказані, тому браузер додав зображення в початковому вигляді. Для другої фотографії вказана ширина 400 пікселів, що призвело до зменшення її розмірів при збереженні пропорцій. Третя фотографія спотворена, оскільки задана однакова ширина і висота, до того ж, що вихідне зображення не квадратне (рис. 1).
Мал. 1. Розміри фотографії
Аналогічним чином задаються розміри в процентах від ширини батьківського елементу, таким чином можна встановити картинку на всю ширину вікна браузера. У прикладі 2 показано додавання трьох фотографій в ряд, ширина яких прив'язана до ширини вікна.
Приклад 2. Розміри в процентах
В даному прикладі всі розміри задані у відсотках, так що доводиться користуватися математикою, щоб сумарна ширина не вийшло більше 100%. Ширину кожного елемента
Мал. 2. Масштабування фотографій
Масштабування через стилі
Стилі зручно задіяти, коли потрібно масово задати однакові розміри для безлічі зображень, тоді не доведеться вказувати індивідуальні розміри для кожної картинки через width і height. Але якщо у вас велика кількість ілюстрацій різного розміру, то стилі тут ніяк не допоможуть. Вони стануть в нагоді, наприклад, для іконок однакової ширини і висоти або коли розміри задаються у відсотках, як це показано вище. У прикладі 3 приведений стиль для зміни розмірів усіх зображень всередині елемента
Приклад 3. Розміри через стилі
Коли для одного елемента одночасно вказується атрибут width і стильове властивість width. то стилі мають пріоритет вище.
інтерполяція
Припустимо, що у нас є растрова картинка розміром 200х200 пікселів і ми збільшуємо її пропорційно по ширині в два рази. Площа зображення і загальна кількість пікселів виросте при цьому в чотири рази. Нові пікселі додаються браузером самостійно виходячи з набору вже наявних. Спосіб отримання цих нових пікселів називається інтерполяцією зображення. Треба розуміти, що якість дуже сильно залежить від самого зображення, масштабу і алгоритму, але зазвичай результат виходить гірша за оригінал.
Схоже відбувається і при зменшенні зображення, тільки браузеру вже доводиться не додавати, а викидати частина пікселів.
Алгоритм інтерполяції закладений в браузер і може бути змінений за допомогою властивості image-rendering. На жаль, браузери поки слабо підтримують цю властивість, тому доводиться вказувати кілька різних значень. У прикладі 4 показано зміна алгоритму, щоб переходи кольорів не розмивалися, а залишалися чіткими. У браузерах Chrome і Opera приклад поки не працює, очікується що підтримка властивості з'явиться в нових версіях.
Приклад 4. Зміна алгоритму інтерполяції
Результат даного прикладу показаний на рис. 3. Для лівої картинки застосовується алгоритм, заданий за замовчуванням; для правої - метод інтерполяції по найближчих точках.
Мал. 3. Вид картинок після збільшення масштабу
Вписування картинки в область
Часом зображення необхідно вписати в область заданих розмірів, наприклад, для створення слайд-шоу - плавної зміни декількох фотографій. Є два основних способи. Перший метод простий і працює у всіх браузерах. Задаємо бажані розміри області і приховуємо все, що в неї не поміщається за допомогою властивості overflow із значенням hidden (приклад 5).
Приклад 5. Використання overflow
Результат прикладу показаний на рис. 4. Область має висоту 400 пікселів і займає всю доступну їй ширину. Для фотографії всередині
Мал. 4. Фотографія всередині області заданих розмірів
Другий спосіб не так універсальний, оскільки властивість object-fit не підтримуються в IE, а Firefox його розуміє тільки з версії 36. Зате object-fit дозволяє більш акуратно вписати зображення в задану область. У прикладі 6 показаний стиль для цього. Задіяно значення cover. воно збільшує або зменшує зображення так, щоб воно завжди повністю заповнювала всю область.
Приклад 6. Використання object-fit