Tag HTML <picture>

Definicja i użycie

<picture> Etykieta daje programistom web-owym większą elastyczność w określaniu zasobów obrazowych.

<picture> Najbardziej powszechnym zastosowaniem elementu jest responsywny projekt, gdzie artystyczny kierunek. Można zaprojektować wiele obrazów, aby lepiej wypełniać pole widzenia przeglądarki, zamiast rozszerzać lub zmniejszać skalę jednego obrazu w zależności od szerokości pola widzenia.

<picture> Element zawiera dwa etykiety: jeden lub kilka <source> etykietka i <img> etykietka.

Przeglądarka znajdzie pierwszy element <source>, który pasuje do medium zapytania i aktualnej szerokości okna przeglądarki, a następnie wyświetli poprawne obraz (w atrybucie srcset). Element <img> jest <picture> Ostatni podrzędny element elementu jest obowiązkowy, służy jako alternatywna opcja, gdy żaden etykietka source nie pasuje.

Wskazówka:<picture> Elementy <video> i <audio> Podobne. Możesz ustawić różne źródła, pierwsze źródło zgodne z preferencjami zostanie użyte.

Zobacz również:

HTML kurs:Element <picture> w HTML

CSS kurs:Projektowanie responsywne CSS - obraz

Przykład

<picture> Sposób użycia tagu:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Spróbuj sam

Globalne atrybuty

<picture> Tagi obsługują również Globalne atrybuty w HTML.

Atrybuty zdarzeń

<picture> Tagi obsługują również Atrybuty zdarzeń w HTML.

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje ten tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0