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