Którą deklarację CSS należy przypisać obrazowi, aby zmniejszał się razem z kontenerem na wąskich ekranach, ale nigdy nie był wyświetlany szerzej niż jego kontener?
A.
min-width: 100%;
B.
height: 100%;
C.
max-width: 100%;
D.
width: 100px;
Deklaracja max-width: 100%; jest właściwa, bo ustawia maksymalną szerokość obrazu na 100% szerokości jego kontenera. Czyli obraz może się zmniejszyć, gdy kontener robi się węższy, ale nie przekroczy jego szerokości i nie wypchnie układu poza ekran. To jest jedna z podstawowych dobrych praktyk przy responsywnym projektowaniu stron WWW. W praktyce bardzo często zapisuje się to tak: img { max-width: 100%; height: auto; }. Druga część, height: auto;, pilnuje proporcji obrazu, żeby grafika nie była rozciągnięta w pionie albo spłaszczona. Moim zdaniem to jeden z tych prostych zapisów CSS, które robią ogromną różnicę na telefonach. Przydaje się w artykułach, kartach produktów, galeriach, banerach i wszędzie tam, gdzie obraz ma dopasować się do elastycznego layoutu. Ważne jest też to, że max-width nie powiększa na siłę małych obrazków ponad ich naturalny rozmiar, tylko ogranicza zbyt duże grafiki. Dzięki temu strona wygląda stabilniej i nie pojawia się poziomy pasek przewijania, który w responsywnym projekcie zwykle oznacza jakiś problem z szerokościami elementów.
W tym pytaniu łatwo pomylić właściwości CSS, bo kilka z nich używa procentów albo odnosi się do rozmiaru elementu, ale ich działanie jest zupełnie inne. Ustawienie width: 100px; nadaje obrazowi stałą szerokość. Taki obraz nie reaguje sensownie na zmianę szerokości kontenera, więc na małych ekranach może być za duży, a na dużych wyglądać przypadkowo mało. Stałe wartości w pikselach mają swoje zastosowanie, ale nie są dobrym rozwiązaniem, gdy celem jest responsywność. Z kolei height: 100%; dotyczy wysokości, a nie szerokości. Dodatkowo procentowa wysokość działa przewidywalnie tylko wtedy, gdy rodzic ma jasno określoną wysokość. W obrazach może to prowadzić do dziwnych efektów, zwłaszcza gdy ktoś później ustawi też szerokość i proporcje grafiki zaczną się rozjeżdżać. Częsty błąd polega na myśleniu, że skoro 100% oznacza dopasowanie, to każda właściwość z 100% będzie dobra. No właśnie nie. min-width: 100%; też nie rozwiązuje problemu, bo określa minimalną szerokość, a nie maksymalną. Obraz ma być co najmniej tak szeroki jak kontener, ale nadal może być szerszy, więc nie chroni przed przepełnieniem układu. W responsywnym CSS trzeba rozróżniać ograniczenie od wymuszenia rozmiaru. Do ograniczenia szerokości obrazu względem kontenera służy max-width: 100%;, najlepiej razem z height: auto;, żeby zachować naturalne proporcje grafiki.