Projektujesz responsywną galerię obrazów. Chcesz, aby obrazy w galerii (.gallery img) zachowywały swoje proporcje, ale ich maksymalna szerokość nie przekraczała szerokości kontenera, w którym się znajdują. Jaka kombinacja właściwości CSS pomoże to osiągnąć?

Poprawna odpowiedź: B (.gallery img { width: 100%; height: auto; max-width: 100%; })

• width: 100%; sprawia, że obraz próbuje zająć 100% szerokości swojego kontenera rodzica.
• height: auto; powoduje, że wysokość obrazu jest automatycznie dostosowywana, aby zachować jego oryginalne proporcje przy danej szerokości.
• max-width: 100%; jest kluczowe – zapewnia, że obraz nie będzie szerszy niż jego naturalna szerokość (jeśli jest mniejsza niż 100% kontenera) LUB nie będzie szerszy niż 100% kontenera (jeśli jest większy). W kontekście responsywności, jeśli chcemy by obraz nie był większy niż kontener, a jednocześnie nie był sztucznie powiększany ponad swoją natywną rozdzielczość, często używa się samego max-width: 100%; height: auto; bez width: 100%;. Jednak w kontekście pytania, gdzie ma nie przekraczać szerokości kontenera, width: 100%; max-width: 100%; height: auto; działa dobrze, zapewniając, że obraz wypełni kontener do swojej maksymalnej możliwej (lub natywnej) szerokości bez zniekształceń.

Dlaczego pozostałe opcje są nieprawidłowe?

• A: height: 100% przy width: auto może prowadzić do zniekształcenia obrazu, jeśli kontener ma inne proporcje.
• C: aspect-ratio to nowsza właściwość, która może pomóc, ale fit-mode nie jest standardową właściwością. object-fit: contain; byłoby bliższe, ale opcja B jest bardziej klasycznym i szeroko wspieranym podejściem.
• D: scale, max-size, preserve-aspect nie są standardowymi właściwościami CSS w tym kontekście.