Kierunek sztuki

Katie Hempenius
Katie Hempenius

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran 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.

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