Wypróbuj tę wersję demonstracyjną
- Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran
. - Załaduj ponownie aplikację, używając różnych rozmiarów przeglądarki. Zauważ, jak bardzo różnią się te obrazy: nie tylko rozmiarem, ale też kadrowaniem i formatem obrazu.
Co się stało?
Kierunek artystyczny pokazuje różne obrazy na różnych rozmiarach wyświetlacza.
Obraz elastyczny wczytuje różne rozmiary tego samego obrazu. Kierunek artystyczny idzie o krok dalej i wczytuje zupełnie inne obrazy w zależności od wyświetlacza.
Użyj kierunku artystycznego, aby poprawić prezentację wizualną. Na przykład różne przycięcia obrazu w tej wersji demonstracyjnej zapewniają, że punkt zainteresowania (kwiat) jest zawsze wyświetlany szczegółowo, niezależnie od wyświetlacza. Korzyści płynące z kierunku artystycznego są wyłącznie estetyczne. Nie zapewniają one żadnych korzyści pod względem wydajności w porównaniu z obrazami elastycznymi.
Wyświetlanie kodu
- Otwórz plik
index.html, aby zobaczyć kod kierunku artystycznego w tej wersji demonstracyjnej.
Jak działa kod
Kierunek artystyczny wykorzystuje tagi <picture>, <source> i <img>.
obraz
Tag <picture> zawiera co najmniej 1 tag <source> i 1 tag <image>.
source
Tag <source> określa zasób multimedialny.
Przeglądarka używa pierwszego tagu <source> z zapytaniem o media, które zwraca wartość „prawda”. Jeśli żadne zapytanie o media nie pasuje, przeglądarka wczytuje obraz określony przez <img>.
.
img
Tag <img> sprawia, że ten 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>.