Określanie wielu szerokości boksów

Katie Hempenius
Katie Hempenius

Wypróbuj wersję demonstracyjną

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran 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 lub min-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)