Jak sprawić, aby obrazy (<img>) na responsywnej stronie internetowej automatycznie skalowały się w dół, aby nie wychodziły poza szerokość swojego kontenera, zachowując jednocześnie swoje proporcje?

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

• max-width: 100%; zapewnia, że obraz nigdy nie będzie szerszy niż jego kontener rodzic. Jeśli obraz jest naturalnie węższy, zachowa swoją szerokość.
• height: auto; sprawia, że wysokość obrazu jest dostosowywana proporcjonalnie do jego (potencjalnie zmienionej) szerokości, co zapobiega zniekształceniom.
• display: block; jest często dodawane, aby uniknąć problemów z dodatkowym odstępem pod obrazami, które domyślnie są elementami inline.

Dlaczego pozostałe opcje są nieprawidłowe?

• A: width: 100%; height: 100%; może zniekształcić obraz, jeśli jego proporcje nie pasują do proporcji kontenera. object-fit: contain; pomogłoby, ale opcja B jest prostsza i bardziej powszechna dla tego podstawowego celu.
• C: size: responsive i aspect-ratio: keep nie są standardowymi właściwościami CSS.
• D: overflow: hidden na obrazie nic nie da w tym kontekście; width: auto; height: auto; samo w sobie nie zapewni skalowania w dół do kontenera.