Katie Hempenius
이 데모 사용해 보기
사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.크기가 다른 브라우저 창에서 앱을 새로고침하여 브라우저가 다른 이미지를 로드하고 브라우저 크기에 따라 다른 레이아웃을 사용하는지 확인합니다.
코드 보기
index.html에서 이를 실행하는 코드를 확인합니다.
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
어떻게 된 것일까요?
sizes 속성의 값에 따라 이미지 표시 너비는 최대 480px 너비의 뷰포트에서는 '뷰포트 너비의 100%', 481~1024px 너비의 화면에서는 '뷰포트 너비의 50%', 1024px보다 큰 화면에서는 800px입니다. 이 너비는 CSS에 지정된 너비와 일치합니다.
여러 개의 슬롯 너비를 지정할 수 있는 기능은 다양한 표시 영역 크기에 서로 다른 스타일 (예: 이미지 너비)을 사용하는 페이지 레이아웃을 수용합니다.
여러 슬롯 너비를 지정하는 방법
- 쉼표로 구분된 목록을 사용하여 여러 슬롯 너비를 지정합니다. 마지막 항목을 제외한 각 목록 항목은 미디어 조건 (예:
max-width또는min-width)과 슬롯 너비로 구성됩니다. - 이 목록의 마지막 항목은 기본 슬롯 너비입니다. 이는 기본값이므로 미디어 조건을 지정할 필요가 없습니다.
- 원하는 만큼 많은 슬롯 너비를 나열할 수 있습니다.
srcset에 나열된 이미지 수는 중요하지 않습니다. 슬롯 너비는 다양한 단위를 사용하여 지정할 수 있습니다. 다음은 모두 유효한 너비입니다.
100px33vw20emcalc(50vw-10px)
다음은 유효한 너비가 아닙니다.
25%(크기 속성에는 비율을 사용할 수 없음)