Масштабування картинок

Якщо для елемента не задати атрибути width і height , то браузер самостійно визначить ширину та висоту зображення після завантаження файлу та покаже його у вихідному розмірі. Малюнок у форматі SVG браузери, крім IE, виводять на всю доступну ширину.

Зміна масштабу та пропорцій зображення робиться як через атрибути так і через стилі.

Використання атрибутів

Будь-яку картинку можна збільшувати, так і зменшувати в розмірах, задаючи значення висоти або ширини в пікселях або відсотках від розміру батька. Якщо встановлена ​​лише ширина чи висота, то друга величина обчислюється автоматично з пропорцій картинки. Два задані значення можуть спотворити пропорції, якщо вони задані неправильно. У прикладі 1 показані різні варіанти завдання розмірів пікселів.

Приклад 1. Розміри у пікселях

У прикладі використовувалася та сама фотографія, для першого розміри явно не вказані, тому браузер додав зображення у вихідному вигляді. Для другої фотографії вказано ширину 400 пікселів, що призвело до зменшення її розмірів при збереженні пропорцій. Третя фотографія спотворена, оскільки задана однакова ширина і висота при тому, що вихідне зображення не квадратне (рис. 1).

Мал. 1. Розміри фотографії

Аналогічно задаються розміри у відсотках від ширини батьківського елемента, таким чином можна встановити картинку на всю ширину вікна браузера. У прикладі 2 показано додавання трьох фотографій до ряду, ширина яких прив'язана до ширини вікна.

Приклад 2. Розміри у відсотках

У цьому прикладі всі розміри задані у відсотках, отже доводиться користуватися математикою, щоб сумарна ширина вийшла більше 100%.Ширину кожного елемента встановлюємо як 27%, до неї додається поле ліворуч і праворуч по 2%, разом кожен елемент займає 31%, а всього 31х3 = 93%. Решта 100-93 = 7% ділимо навпіл, в результаті 7 / 2 = 3.5% - стільки виходить ширина проміжку між блоками. Для першого відступ зліва нам не потрібний, тому його прибираємо через властивість margin-left. Результат цього прикладу показано на рис. 2.

Мал. 2. Масштабування фотографій

Масштабування через стилі

Стилі зручно задіяти, коли потрібно масово задати однакові розміри для безлічі зображень, тоді не доведеться вказувати індивідуальні розміри кожної картинки через width і height . Але якщо у вас багато ілюстрацій різного розміру, то стилі тут ніяк не допоможуть. Вони знадобляться, наприклад, для іконок однакової ширини та висоти або коли розміри задаються у відсотках, як показано вище. У прикладі 3 наведено стиль зміни розмірів всіх зображень всередині елемента .

Приклад 3. Розміри через стилі

Коли одного елемента одночасно вказується атрибут width і стильове властивість width , то стилі мають пріоритет вище.

Інтерполяція

Припустимо, що ми маємо растрова картинка розміром 200х200 пікселів і ми збільшуємо її пропорційно по ширині вдвічі. Площа зображення та загальна кількість пікселів зросте у чотири рази. Нові пікселі додаються браузером самостійно виходячи з набору наявних. Спосіб отримання нових пікселів називається інтерполяцією зображення. Треба розуміти, що якість дуже сильно залежить від самого зображення, масштабу та алгоритму, але зазвичай результат виходить гірше за оригінал.

Схоже відбувається і при зменшенні зображення, тільки браузеру вже не додавати, а викидати частину пікселів.

Алгоритм інтерполяції закладено в браузер і може бути змінений за допомогою image-rendering властивості. На жаль, браузери поки що слабко підтримують цю властивість, тому доводиться вказувати кілька різних значень. У прикладі 4 показано зміну алгоритму, щоб переходи кольорів не розмивалися, а залишалися чіткими. У браузерах Chrome і Opera приклад поки не працює, очікується, що підтримка якості з'явиться в нових версіях.

Приклад 4. Зміна алгоритму інтерполяції

Результат цього прикладу показано на рис. 3. Для лівої картинки застосовується алгоритм, заданий за умовчанням; для правої - метод інтерполяції по найближчих точках.

Мал. 3. Вид картинок після збільшення масштабу

Вписування картинки в область

Іноді зображення необхідно вписати в область заданих розмірів, наприклад, для створення слайдшоу – плавної зміни кількох фотографій. Є два основні способи. Перший метод простий та працює у всіх браузерах. Задаємо бажані розміри області і приховуємо все, що в неї не міститься за допомогою overflow властивості зі значенням hidden (приклад 5).

Приклад 5. Використання overflow

Результат прикладу показано на рис. 4. Область має висоту 400 пікселів і займає всю доступну їй ширину. Для фотографії всередині встановлюємо ширину 100% і зрушуємо її вгору, щоб вона краще виглядала. Оскільки висота області фіксована, то при зменшенні вікна браузера до певної межі висота фотографії виявиться меншою за 400 пікселів і під нею з'явиться порожній простір. Тому вводимо властивість min-width, щоб цього уникнути.

Мал. 4.Фотографія всередині області заданих розмірів

Другий спосіб не такий універсальний, оскільки властивість object-fit не підтримується в IE, а Firefox його розуміє тільки з версії 36. Зате object-fit дозволяє акуратніше вписати зображення в задану область. У прикладі 6 показаний стиль для цього. Задіяно значення cover, воно збільшує або зменшує зображення так, щоб воно завжди повністю заповнювало всю область.

Приклад 6. Використання object-fit

також

• object-fit
• object-position
• Атрибути елементів
• Вирівнювання картинок
• Додавання медіа-контенту
• Зображення
• Зображення
• Зображення у Bootstrap 5
• Зображення в HTML
• Коротка історія зображень
• Підмальовковий підпис
• Фон у CSS
• Формати графічних файлів

HTML: Зміна розміру зображення

Якщо для зображення в HTML коді не вказані розміри, то браузер буде відображати її в природному розмірі, але він не зможе визначити розмір доти, доки картинка завантажується і аналізується. Тим часом мабуть браузер вже скачав всю HTML-розмітку і текст, а зображення з'являтимуться на своєму місці тільки після їх завантаження. Для розміщення зображень після аналізу їх розміру, браузер може знову перебудовувати розмітку, що може бути не прийнятно, якщо користувач вже почав читати текст на сторінці. Для того, щоб браузер заздалегідь зарезервував простір потрібного розміру для відображення картинки, можна скористатися атрибутами width (ширина картинки) і height (висота картинки) тега , в яких як значення вказуються ширина і висота картинки в пікселях без вказівки самої одиниці виміру.

Якщо атрибути width і height містять значення, що не відповідають натуральному розміру картинки, браузер масштабуватиме картинку під ці розміри. Однак зазвичай слід уникати зміни розмірів зображення таким чином. Коли браузер масштабує картинку у більшу чи меншу сторону від її натурального розміру, то зображення може відображатися менш чітко або різкіше. В ідеалі в атрибутах width і height повинні бути вказані натуральні розміри, а для збільшення чи зменшення картинок краще скористатися графічним редактором.

Ви можете зробити зображення більшим або меншим, змінюючи значення атрибутів width і height. Але при дуже великому збільшенні якість картинки може стати гіршою.

Якщо ви вирішили змінити розмір картинки за допомогою атрибутів width і height , слід дотримуватися пропорції між шириною і висотою картинки. Зміна пропорцій розміру картинки призведе до її деформації.

Примітка: щоб не обчислювати пропорції для висоти і ширини картинки, можна просто задати тільки один з атрибутів або width або height, залежно від того, який розмір у даній ситуації вам важливіший за ширину або висоти картинки. У разі вказування лише одного атрибута другий розмір (ширину або висоту) браузер підбере автоматично. Ви можете перевірити це на попередньому прикладі, стерши для картинки в коді один із атрибутів, що задають розмір.

З цією темою дивляться:

Копіювання матеріалів з даного сайту можливе лише з дозволу адміністрації сайту
та при вказівці прямого активного посилання на джерело.
2011 - 2024 © puzzleweb.ru | razumnikum.ru