CSS image-set() — зображення під щільність екрана
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте зображення з різними розмірами та роздільністю, щоб забезпечити оптимальну якість зображень на різних пристроях.
автор: Bond - Порада
-
Вказуйте доступні розміри зображень для браузера, щоб він міг вибрати найкраще підходяще зображення.
автор: Bond - Порада
-
Переконайтеся, що зображення зазначені в правильному порядку, починаючи з найменшого до найбільшого розміру.
автор: Bond - Нотатка
-
автор: Bondimage−set()є інструментом адаптивного дизайну, який спрощує роботу з різними зображеннями для різних екранів. Він забезпечує зручний спосіб управління контентом так, щоб веб-сайт завжди виглядав професійно, незалежно від пристрою, який використовують користувачі.
Синтаксис
image-set(<image-set-list>);Функція image-set може отримувати 3 значень:
-
<image> -
URL-адреса зображення.
автор: Bond -
<resolution> -
Одиниці вимірювання включають
автор: Bondxабоdppxдля одиниці "точок на піксель",dpiдля одиниці "точок на дюйм" іdpcmдля одиниці "точок на сантиметр". Кожне зображення в межахimage-set()повинно мати унікальну роздільність. -
type(<string>) -
Дійсний рядок MIME-типу, наприклад
автор: Bond"image/jpeg".
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 113 | 88 | 6 | 15 | 113 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 113 | 113 | 88 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Один рядок image-set() — два різні файли: на звичайному екрані браузер бере варіант 1x, на екрані з подвоєною щільністю (Retina, більшість телефонів) — 2x. Праворуч те саме зображення, підключене звичайним url(): воно одне на всі екрани.
HTML
<div id="description">
<h2>image-set(): браузер вибирає файл сам</h2>
<p>Якщо ви на екрані зі звичайною щільністю, у лівому блоці буде напис 1x. На Retina або на телефоні там з'явиться 2x. Правий блок не змінюється ніколи.</p>
</div>
<div id="result">
<figure>
<div class="box chooses"></div>
<figcaption>image-set(… 1x, … 2x)</figcaption>
</figure>
<figure>
<div class="box fixed"></div>
<figcaption>звичайний url()</figcaption>
</figure>
</div>CSS
#result {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
figure {
margin: 0;
text-align: center;
font: 13px/1.4 sans-serif;
}
figcaption {
margin-top: 8px;
}
.box {
width: 220px;
height: 120px;
border: 1px solid #adb5bd;
border-radius: 8px;
background-size: cover;
}
/* Спершу запасний рядок — для браузерів без image-set(), потім сам image-set() */
.chooses {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Crect width='220' height='120' fill='%23868e96'/%3E%3Ctext x='110' y='72' font-size='30' text-anchor='middle' fill='%23fff'%3Eзапасний%3C/text%3E%3C/svg%3E");
background-image: image-set(
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Crect width='220' height='120' fill='%23087f5b'/%3E%3Ctext x='110' y='74' font-size='40' text-anchor='middle' fill='%23fff'%3E1x%3C/text%3E%3C/svg%3E") 1x,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='240'%3E%3Crect width='440' height='240' fill='%23a61e4d'/%3E%3Ctext x='220' y='148' font-size='80' text-anchor='middle' fill='%23fff'%3E2x%3C/text%3E%3C/svg%3E") 2x
);
}
.fixed {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Crect width='220' height='120' fill='%231864ab'/%3E%3Ctext x='110' y='74' font-size='40' text-anchor='middle' fill='%23fff'%3E1x%3C/text%3E%3C/svg%3E");
}HTML
<div id="description">
<h2>Приклад: Застосування image-set()</h2>
<p>Блок використовує функцію image-set() для фонового зображення.</p>
</div>
<div id="result">
<div class="box with-image-set"></div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 200px;
height: 200px;
margin-right: 20px;
}
.with-image-set {
background-image: image-set(
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23264653'/%3E%3Ctext x='50' y='60' font-family='sans-serif' font-size='30' text-anchor='middle' fill='%23fff'%3E1x%3C/text%3E%3C/svg%3E") 1x,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%232a9d8f'/%3E%3Ctext x='50' y='60' font-family='sans-serif' font-size='30' text-anchor='middle' fill='%23fff'%3E2x%3C/text%3E%3C/svg%3E") 2x,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23e76f51'/%3E%3Ctext x='50' y='60' font-family='sans-serif' font-size='30' text-anchor='middle' fill='%23fff'%3E3x%3C/text%3E%3C/svg%3E") 3x
);
background-repeat: no-repeat;
background-size: cover;
}Коментарі
Коментарів ще немає — будьте першим!