Aby strona WWW była responsywna, należy między innymi definiować

Poprawna odpowiedź wskazuje na jedną z kluczowych zasad projektowania responsywnych stron WWW: elementy, w tym obrazy, powinny skalować się razem z szerokością dostępnej przestrzeni. Definiowanie rozmiarów obrazów w procentach (np. width: 100% w CSS) powoduje, że grafika dopasowuje się do szerokości kontenera, a nie trzyma sztywnego rozmiaru w pikselach. Dzięki temu na dużym monitorze obraz może być szeroki, a na ekranie telefonu automatycznie się zmniejszy, nie rozwalając układu i nie powodując konieczności przewijania w poziomie. W praktyce często łączy się zapis procentowy z dodatkowymi ograniczeniami, np. img {max-width: 100%; height: auto;}. Taki zapis to standardowa, podręcznikowa technika w responsive web design. Z mojego doświadczenia to jedna z pierwszych rzeczy, jaką sprawdza się, gdy strona „rozjeżdża się” na telefonach. Procentowe wartości dobrze współpracują z elastycznymi siatkami (flexbox, grid), media queries oraz z tzw. fluid layout, czyli płynnymi układami. Warto też wiedzieć, że sam procentowy rozmiar obrazów to nie wszystko. W nowoczesnych projektach stosuje się dodatkowo atrybuty srcset i sizes, aby serwer serwował różne wersje obrazów w zależności od gęstości pikseli i szerokości ekranu. Jednak fundament pozostaje ten sam: unikanie sztywnych, pikselowych szerokości i korzystanie z jednostek względnych, takich jak procenty, vw (viewport width) czy em/rem. Jest to zgodne z dobrymi praktykami branżowymi i zaleceniami twórców frameworków typu Bootstrap czy Tailwind, gdzie wszystkie komponenty są tworzone właśnie z myślą o elastycznym skalowaniu na różnych urządzeniach.