Wypróbuj tę wersję demonstracyjną
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
. - Załaduj aplikację przy użyciu różnych rozmiarów przeglądarki. Zwróć uwagę, jak różne są te obrazy: różnią się nie tylko rozmiarem, ale też przycinaniem i formatem obrazu.
Co się stało?
Kierunek artystyczny wyświetla różne obrazy w różnych rozmiarach ekranu.
Obraz elastyczny wczytuje różne rozmiary tego samego obrazu. Kierunek artystyczny idzie jeszcze dalej i ładuje zupełnie inne obrazy w zależności od wyświetlacza.
Użyj kierowania artystycznego, aby poprawić prezentację wizualną. Na przykład różne przycięcia obrazu w tym pokazie zapewniają, że punkt zainteresowania (kwiat) jest zawsze wyświetlany szczegółowo, niezależnie od wyświetlacza. Zalety kierowania artystycznego są czysto estetyczne. Nie zapewniają one żadnych korzyści w zakresie skuteczności w porównaniu z obrazami elastycznymi.
Wyświetlanie kodu
- Kliknij
index.html, aby wyświetlić kod kierowania artystycznego w tym demo.
Jak działa kod
Zarządzanie grafiką korzysta z tagów <picture>, <source> i <img>.
obraz
Tag <picture> stanowi otoczkę dla 0 lub więcej tagów <source> i jednego tagu <image>.
source
Tag <source> określa zasób multimedialny.
Przeglądarka używa pierwszego tagu <source> z zapytaniem o multimedia, które zwraca wartość true. Jeśli żadna z zapytań nie pasuje, przeglądarka wczyta obraz określony przez <img>.
.
img
Tag <img> sprawia, że kod działa w przeglądarkach, które nie obsługują tagu <picture>.
Jeśli przeglądarka nie obsługuje tagu <picture>, wczytuje obraz określony przez tag <img>.