이미지가 컨테이너를 넘지 않고 화면에 맞게 표시되도록 합니다.
max-width:100%와 height:auto는 원본 비율을 유지하며 줄어들게 합니다. picture와 srcset/sizes는 화면과 해상도에 맞는 실제 파일을 선택해 전송 용량도 줄입니다.
이번 예제의 출발점은 img { max-width:100%; height:auto; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 미리보기 폭을 줄여 source가 선택되는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
CSS로 큰 이미지만 축소하면 모바일도 큰 원본 파일을 내려받을 수 있습니다.
직접 바꿔보세요미리보기 폭을 줄여 source가 선택되는지 확인하세요.