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ę w oknach przeglądarki o różnych rozmiarach, aby zobaczyć, jak przeglądarka wczytuje różne obrazy i używa różnych układów przy różnych rozmiarach okna.
Wyświetlanie kodu
- Sprawdź
index.html, aby zobaczyć kod, który to umożliwia:
<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świetlania obrazu będzie wynosić: „100% szerokości widocznego obszaru” w przypadku widocznych obszarów o szerokości do 480 pikseli, „50% szerokości widocznego obszaru” na ekranach o szerokości 481–1024 pikseli i 800 pikseli na ekranach o szerokości powyżej 1024 pikseli. Te szerokości odpowiadają szerokościom określonym w kodzie CSS.
Możliwość określenia wielu szerokości boksów pozwala na dostosowanie układów stron, które używają różnych stylów (czyli szerokości obrazów) do różnych rozmiarów widocznego obszaru.
Jak określić wiele szerokości boksów
- Aby określić wiele szerokości boksów, użyj listy rozdzielonej przecinkami. Każdy element listy, z wyjątkiem ostatniego, składa się z warunku multimedialnego (np.
max-widthlubmin-width) i szerokości boksu. - Ostatni element na tej liście to domyślna szerokość boksu. Jest to wartość domyślna, więc nie musisz określać warunku multimediów.
- Możesz podać dowolną liczbę szerokości boksów – liczba obrazów wymienionych w parametrze
srcsetnie ma znaczenia. Szerokość boksu można określić za pomocą różnych jednostek. Poniżej podano wszystkie prawidłowe szerokości:
100px33vw20emcalc(50vw-10px)
Ta szerokość jest nieprawidłowa:
25%(w atrybucie sizes nie można używać wartości procentowych)