Wypróbuj wersję demonstracyjną
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Załaduj ponownie aplikację w oknach przeglądarki o innych rozmiarach, aby zobaczyć, jak się wczytuje różne obrazy i korzystać z różnych układów w różnych rozmiarach przeglądarki.
Wyświetl kod
- Znajdź kod na stronie
index.html
, dzięki któremu to działa:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
Co się stało?
Wartość atrybutu sizes
określa, że szerokość wyświetlanego obrazu wynosi:
„100% szerokości widocznego obszaru” w obszarach widocznych do 480px szerokości, „50% widocznego obszaru
szerokość" na ekranach o szerokości 481–1024 pikseli i 800 pikseli na ekranach szerszych niż 1024 piksele. Te
odpowiadają szerokościom określonym w pliku CSS.
Możliwość określenia wielu szerokości boksu pozwala na uwzględnienie układów stron, które używają różnych stylów (czyli szerokości obrazu) w zależności od rozmiaru widocznego obszaru.
Jak określić wiele szerokości boksu
- Aby określić szerokość wielu boksów, użyj listy rozdzielanej przecinkami. Każdy element listy,
z wyjątkiem ostatniego elementu, zawiera warunek mediów (np.
max-width
lubmin-width
) i szerokość boksu. - Ostatni element na liście to domyślna szerokość boksu. Jest to ustawienie domyślne, więc nie musisz określać warunku mediów.
- Możesz podać dowolną szerokość boksu – liczbę obrazów wymienionych w
srcset
nie ma znaczenia. Szerokość boksu może być określona w różnych jednostkach. Oto wszystkie prawidłowe szerokości:
100px
33vw
20em
calc(50vw-10px)
Ta szerokość jest nieprawidłowa:
25%
(nie można używać procentów z atrybutem rozmiary)