picture

Element picture reprezentuje swoje elementy dzieci, których głównym przeznaczeniem jest reprezentowanie zasobu internetowego w postaci pliku graficznego, który dodatkowo może posiadać alternatywne (zamienne) zasobu internetowe w postaci plików graficznych, które mogą zostać uaktywnione przez przeglądarkę internetową w określonych warunkach.

brak

kategoria ogólna

• zawartość opływająca

• zawartość frazowana

• zawartość wbudowana

kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst wbudowany

Przykładowy Kod HTML

<figure>
  <picture>
    <source media="all and (max-width:1024px)" srcset="diagram-duzy.png">
    <source media="all and (max-width:720px)" srcset="diagram-sredni.png">
    <source media="all and (max-width:480px)" srcset="diagram-maly.png">
    <img src="diagram-duzy.png" alt="przykładowa statystyka">
  </picture>

  <figcaption>Przykładowy diagram</figcaption>
</figure>

Kontekstem zewnętrznym przykładowego elementu "picture" jest element "figure". Wspomniany element "figure" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst wbudowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "picture".

kontekst wewnętrzny

zero lub więcej elementów source, a następnie dokładnie jeden element img, ponadto ewentualnie po, przed lub pomiędzy wspomnianymi elementami HTML może wystąpić zawartość skryptowa

Przykładowy Kod HTML

<figure>
  <picture>
    <source media="all and (max-width:1024px)" srcset="diagram-duzy.png">
    <source media="all and (max-width:720px)" srcset="diagram-sredni.png">
    <source media="all and (max-width:480px)" srcset="diagram-maly.png">
    <img src="diagram-duzy.png" alt="przykładowa statystyka">
  </picture>

  <figcaption>Przykładowy diagram</figcaption>
</figure>

Kontekstem wewnętrznym przykładowego elementu "picture" są wyłącznie elementy "source", po których występuje dokładnie jeden element "img", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source", element "source" oraz element "img", jest prawidłowym kontekstem wewnętrznym dla elementu "picture".

Przykładowy Kod HTML

<figure>
  <picture>
    <source media="all and (max-width:1024px)" srcset="diagram-duzy.png">
    <source media="all and (max-width:720px)" srcset="diagram-sredni.png">
    <source media="all and (max-width:480px)" srcset="diagram-maly.png">
    <img src="diagram-duzy.png" alt="przykładowa statystyka">

    <template id="szablon-1">
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
    </template>
    <script src="skrypt-01.js"></script>
  </picture>

  <figcaption>Przykładowy diagram</figcaption>
</figure>

Kontekstem wewnętrznym przykładowego elementu "picture" są wyłącznie elementy "source", po których występuje dokładnie jeden element "img" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "source", element "source", element "source", element "img", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "picture".

wymagane elementy dzieci

jeden element img

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

składnia HTML

<picture> ... </picture>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

/* brak */

tak

tak

tak

tak

nie

tak

Zobacz więcej informacji o interpretacji elementu picture.