이미지가 컨테이너를 넘지 않고 화면에 맞게 표시되도록 합니다.
max-width:100%와 height:auto는 원본 비율을 유지하며 줄어들게 합니다. picture와 srcset/sizes는 화면과 해상도에 맞는 실제 파일을 선택해 전송 용량도 줄입니다.
img는 width: 100%와 height: auto로 .demo 안쪽 폭을 꽉 채우면서 원본 비율에 맞춰 높이를 정하므로, 900×360인 Large 이미지는 폭의 0.4배 높이로 그려집니다. 화면 너비가 420px 이하이면 source의 media 조건이 맞아 src 대신 420×320 Small 이미지를 받아 오고 높이도 그 비율로 바뀝니다. picture와 img를 display: block으로 바꿔 이미지 아래에 생기는 기준선 틈도 없앴습니다.
img에 width와 height 속성으로 900과 360을 적어 두면 브라우저가 파일을 받기 전에 그 비율로 자리를 잡아, 이미지가 도착할 때 아래 내용이 밀려 내려가지 않습니다. CSS의 height: auto가 함께 있으면 실제 크기는 여전히 폭에 맞춰 줄어듭니다.
CSS로 큰 이미지만 축소하면 모바일도 큰 원본 파일을 내려받을 수 있습니다.
직접 바꿔보세요미리보기 폭을 줄여 source가 선택되는지 확인하세요.