CSS function image-set()
Опис
image-set() - це потужний інструмент для веб-розробників, що дозволяє вказувати набір зображень з різними розмірами та роздільністю для відображення на різних пристроях. Ця функція робить роботу з варіативними розмірами зображень більш зручною, забезпечуючи адаптивне відображення контенту на різних екранах.
Кожне зображення в image-set() вказується шляхом до файлу (URL) і, за бажанням, ширини та висоти. Браузер вибирає зображення для відображення, враховуючи розмір контейнера та роздільність пристрою. Найпідходящіше зображення вибирається для оптимального досвіду користувача.
Приклад використання:
background-image: image-set(url("image-small.jpg") 1x, url("image-medium.jpg") 2x, url("image-large.jpg") 3x);
У цьому прикладі, якщо роздільність пристрою 1x, використовується "image-small.jpg"; для 2x - "image-medium.jpg"; для 3x - "image-large.jpg". Це дозволяє забезпечити високоякісний контент на різних пристроях, зберігаючи швидкість завантаження.
| Порада: | Використовуйте зображення з різними розмірами та роздільністю, щоб забезпечити оптимальну якість зображень на різних пристроях. |
| Порада: | Вказуйте доступні розміри зображень для браузера, щоб він міг вибрати найкраще підходяще зображення. |
| Порада: | Переконайтеся, що зображення зазначені в правильному порядку, починаючи з найменшого до найбільшого розміру. |
| Нотатка: |
|
Синтаксис
image-set(<image-set-list>);<image>URL-адреса зображення.
<resolution>Одиниці вимірювання включають
xабоdppxдля одиниці "точок на піксель",dpiдля одиниці "точок на дюйм" іdpcmдля одиниці "точок на сантиметр". Кожне зображення в межахimage-set()повинно мати унікальну роздільність.type(<string>)Дійсний рядок MIME-типу, наприклад
"image/jpeg".
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
113 |
88 |
6 |
15 |
113 |
| Переглядач | ||||
|---|---|---|---|---|
113 |
113 |
88 |
6 |
Мобільних переглядачів ще не додано.
Приклади
Блок використовує функцію image-set() для фонового зображення.