Wypróbuj tę wersję demonstracyjną
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij 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 korzysta z różnych układów w przypadku różnych rozmiarów przeglądarek.
Wyświetlanie kodu
- Aby sprawdzić kod, który umożliwia to działanie, przejdź na stronę
index.html:
<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 będzie wynosić: „100% szerokości widocznego obszaru” na widocznych obszarach o szerokości do 480 pikseli, „50% szerokości widocznego obszaru” na ekranach o szerokości 481–1024 pikseli oraz 800 pikseli na ekranach szerszych niż 1024 piksele. Te szerokości są zgodne ze szerokościami określonymi w kodzie CSS.
Możliwość określania wielu szerokości slotów umożliwia tworzenie układów stron, które wykorzystują różne style (czyli szerokości obrazów) w przypadku różnych rozmiarów widocznego obszaru.
Jak określić wiele szerokości boksu
- Aby określić wiele szerokości boksów reklamowych, użyj listy rozdzielonej przecinkami. Każdy element listy, z wyjątkiem ostatniego, składa się z warunków dotyczących multimediów (np.
max-widthlubmin-width) oraz szerokości slotu. - Ostatni element na liście to domyślna szerokość slotu. Jest to wartość domyślna, więc nie musisz określać warunku multimediów.
- Możesz podać dowolną liczbę szerokości boksów reklamowych – liczba obrazów podanych w
srcsetnie ma znaczenia. Szerokość slotu można określić za pomocą różnych jednostek. Oto prawidłowe szerokości:
100px33vw20emcalc(50vw-10px)
Nieprawidłowa szerokość:
25%(nie można używać procentów z atrybutem rozmiary)