Wypróbuj wersję demonstracyjną
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
- Załaduj ponownie aplikację, używając przeglądarki o różnych rozmiarach. Zwróć uwagę, jak różne obrazy różnią się nie tylko rozmiarem, ale też przycinaniem formatów obrazu.
Co się stało?
Kierunek artystyczny pokazuje różne obrazy na ekranach o różnych rozmiarach.
Obraz elastyczny wczytuje różne rozmiary tego samego obrazu. Kierunek sztuki Wczytuje to zupełnie różne obrazy w zależności od wyświetlacz.
Użyj kierunku w sztuce, aby ulepszyć prezentację wizualną. Na przykład różne adresy URL przycinanie obrazu w tej wersji demonstracyjnej, tak aby ciekawe miejsce (kwiat) było są zawsze widoczne, niezależnie od sposobu wyświetlania. Korzyści z artystycznego kanału czysto estetyczna; nie zwiększa wydajności w porównaniu z obrazami elastycznymi.
Wyświetl kod
- Aby zobaczyć kod wskazówek dojazdu do tej wersji demonstracyjnej, wyświetl
index.html
.
Jak działa kod
Kierunek sztuki wykorzystuje
<picture>
<source>
,
i <img>
.
obraz
Tag <picture>
zawiera kod dla co najmniej 0 tagów <source>
i 1 tagu <image>
.
źródło
Tag <source>
określa zasób multimedialny.
Przeglądarka używa pierwszego tagu <source>
za pomocą zapytania o media
, która zwraca wartość true (prawda). Jeśli nie pasuje żadne z zapytań o media,
przeglądarka wraca do wczytywania obrazu określonego przez atrybut <img>
.
.
img
Tag <img>
sprawia, że kod działa w przeglądarkach, które nie korzystają
obsługują tag <picture>
.
Jeśli przeglądarka nie obsługuje tagu <picture>
, wczytuje tag
obraz określony przez tag <img>
.