Znacznik HTML <obraz>
Przykład
Jak używać tagu <picture>:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Definicja i użycie
Tag <picture>zapewnia programistom internetowym większą elastyczność w określaniu zasobów graficznych.
Najczęstszym zastosowaniem tego <picture>elementu będzie kierowanie grafiką w projektach responsywnych. Zamiast jednego obrazu, który jest skalowany w górę lub w dół w zależności od szerokości widocznego obszaru, można zaprojektować wiele obrazów, aby ładniej wypełniały okno przeglądarki.
Element <picture>zawiera dwa znaczniki: jeden lub więcej
znaczników <source> i jeden znacznik <img> .
Przeglądarka będzie szukać pierwszego elementu <source>, w którym zapytanie o media odpowiada bieżącej szerokości widocznego obszaru, a następnie wyświetli odpowiedni obraz (określony w atrybucie srcset). Element <img> jest wymagany jako ostatnie dziecko <picture>elementu, jako opcja awaryjna, jeśli żaden ze znaczników źródłowych nie pasuje.
Wskazówka: element <picture>działa „podobnie” do <video> i <audio>. Ustawiasz różne źródła, a pierwszym źródłem, które pasuje do preferencji, jest to, które jest używane.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje dany element.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Atrybuty globalne
Znacznik <picture>obsługuje również atrybuty globalne w HTML .
Atrybuty wydarzenia
Tag <picture>obsługuje również Atrybuty Zdarzeń w HTML .
Powiązane strony
Samouczek HTML: HTML <obraz> Element
Samouczek CSS: projektowanie responsywne CSS — obrazy