Wypróbuj tę wersję demonstracyjną
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
- Załaduj ponownie aplikację, używając przeglądarki o różnych rozmiarach. Zwróć uwagę, jak bardzo różnią się te obrazy: nie tylko różnią się rozmiarem, ale też różnymi przycięciami i proporcjami obrazu.
Co się stało?
Kierunek grafiki pokazuje różne obrazy w różnych rozmiarach.
Elastyczny obraz wczytuje różne rozmiary tego samego obrazu. Kierunek grafiki idzie o krok dalej i wczytuje zupełnie inne obrazy w zależności od sposobu wyświetlania.
Użyj wskazówek dotyczących sztuki, aby ulepszyć prezentację wizualną. Na przykład różne przycięte obrazy w tej wersji demonstracyjnej sprawiają, że ciekawe miejsce (kwiat) jest zawsze wyświetlane w szczegółach, niezależnie od sposobu wyświetlania. Zalety kierunku artystycznego są tylko estetyczne – nie poprawiają wydajności w porównaniu z obrazami elastycznymi.
Wyświetl kod
- Wyświetl
index.html
, aby zobaczyć kod kierunku artystycznego w tej wersji demonstracyjnej.
Jak działa kod
Kierunek sztuki używa tagów <picture>
, <source>
i <img>
.
obraz
Tag <picture>
zawiera opakowanie dla 0 lub więcej tagów <source>
i 1 tagu <image>
.
źródło
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 z zapytań o multimedia nie pasuje, przeglądarka przełącza się w tryb wczytywania obrazu określonego przez funkcję <img>
.
każdy film w Twojej mapie witryny ma zdefiniowany tytuł.
img
Tag <img>
umożliwia działanie kodu w przeglądarkach, które nie obsługują tagu <picture>
.
Jeśli przeglądarka nie obsługuje tagu <picture>
, wczytuje obraz określony w tagu <img>
.