Адаптивний вебдизайн - Зображення
Змініть розмір вікна браузера, щоб побачити, як зображення масштабується по розміру сторінки.
Використання властивості width
Якщо для властивості width задано значення в процентах, а для висоти задано значення "auto", зображення буде адаптивним і масштабується вгору і вниз:
Зверніть увагу, що в наведеному вище прикладі зображення можна збільшити до розміру, що перевищує його початковий розмір. В багатьох випадках кращим рішенням буде використання властивості max-width.
Використання властивості max-width
Якщо властивість max-width встановлено на 100%, зображення буде зменшуватись, якщо це необхідно, але ніколи не буде збільшуватись до розміру, що перевищує його початковий розмір:
Додати адаптивне зображення на вебсторінку
Фонові зображення
Фонові зображення також можуть реагувати на зміну розміру і масштабування.
Далі ви побачите три різних методи:
1. Якщо властивість background-size встановлено на "contain", фонове зображення буде масштабуватися й намагатися відповідати області змісту. Однак зображення збереже своє співвідношення сторін (пропорціональне співвідношення між шириною і висотою зображення):
Ось CSS код:
Приклад
div {
width: 100%;
height: 400px;
background-image: url('../images/img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
Спробуйте самі »
2. Якщо для властивості background-size встановлено значення "100% 100%", фонове зображення буде розтягуватися, щоб охопити всю область змісту:
Ось CSS код:
Приклад
div {
width: 100%;
height: 400px;
background-image: url('../images/img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
Спробуйте самі »
3. Якщо для властивості background-size встановлено значення "cover", фонове зображення буде масштабуватися, щоб охопити всю область змісту. Зверніть увагу, що значення "cover" зберігає співвідношення сторін, і деяка частина фонового зображення може бути обрізана:
Ось CSS код:
Приклад
div {
width: 100%;
height: 400px;
background-image: url('../images/img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Спробуйте самі »
Різні зображення для різних пристроїв
Велике зображення може бути ідеальним на великому екрані комп’ютера, але безкорисним на маленькому пристрої. Навіщо завантажувати велике зображення, якщо вам все одно потрібно зменшити його? Щоб зменшити навантаження, або по якимось іншим причинам, ви можете використовувати медіазапити для відображення різних зображень на різних пристроях.
Ось одне велике зображення і одне менше зображення, яке буде відображатися на різних пристроях:
Приклад
/* Для ширини менше 400px: */
body {
background-image: url('../images/img_smallflower.jpg');
}
/* Для ширини 400px і більше: */
@media only screen and (min-width: 400px) {
body {
background-image: url('../images/img_flowers.jpg');
}
}
Спробуйте самі »
Ви можете використовувати медіазапит min-device-width, замість min-width, який перевіряє ширину пристрою, а не ширину браузера. Тоді зображення не зміниться при зміні розміру вікна браузера:
Приклад
/* Для пристроїв, менше ніж 400px: */
body {
background-image: url('../images/img_smallflower.jpg');
}
/* Для пристроїв 400px і більше: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('../images/img_flowers.jpg');
}
}
Спробуйте самі »
HTML5 елемент <picture>
HTML5 представив елемент <picture>, який дозволяє вам визначити більше одного зображення.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <picture> | 13 | 38.0 | 38.0 | 9.1 | 25.0 |
Елемент <picture> працює аналогічно елементам <video> і <audio>. Ви встановлюєте різні джерела, і пеше джерело, яке відповідає перевазі, є тим, що використовується:
Приклад
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Спробуйте самі »
Атрибут srcset є обов’язковим і визначає джерело зображення.
Атрибут media є необов’язковим і приймає запити мультимедіа, які ви знайдете в розділі CSS @media правила.
Також необхідно визначити елемент <img> для браузерів, які не підтримують елемент <picture>.
