Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Zawód: Technik informatyk , Technik programista
Kategorie: Tworzenie stron WWW Systemy CMS i narzędzia webowe
Aby obraz na stronie automatycznie dopasowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy:
Odpowiedzi
Źle. Wymiar w pikselach pozostaje stały i nie skaluje się responsywnie.
Źle. Sztywne piksele dają stały rozmiar - obraz nie dopasuje się do mniejszego ekranu.
Źle. Bez ustawienia szerokości obraz zachowa rozmiar oryginału i może wystawać poza ekran.
Dobrze. Szerokość w procentach (np.
width: 100%) skaluje obraz do szerokości kontenera/ekranu.Informacja zwrotna
Responsywny obraz skaluje się razem z układem strony. Uzyskuje się to, ustawiając jego szerokość w jednostce względnej - w procentach, na przykład
img { width: 100%; max-width: 100%; }. Obraz dopasowuje się wtedy do szerokości kontenera, a wysokość zwykle pozostawia się jako auto, by zachować proporcje. Dlatego szerokość obrazu ustawia się w wartościach procentowych.