Aby obraz na stronie automatycznie dopasowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy:
Źle. Bez ustawienia szerokości obraz zachowa rozmiar oryginału i może wystawać poza ekran.
Ź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.
Dobrze. Szerokość w procentach (np.
width: 100%) skaluje obraz do szerokości kontenera/ekranu.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.Pozostałe sposoby nie dają responsywności. Ustawienie obu wymiarów (lub jednego) w pikselach daje stały rozmiar - na małym ekranie obraz nie zmaleje i może wystawać poza widok. Pozostawienie obrazu bez stylów sprawia, że zachowuje on swoje oryginalne, sztywne wymiary, więc również nie dopasuje się do urządzenia. Aby obraz skalował się płynnie do szerokości ekranu, jego szerokość podaje się w procentach (np.
width: 100%), dlatego to ta odpowiedź jest poprawna.