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>.