<img> 태그의 srcset 속성
HTML <img> 태그 ⇒
정의 및 특징
<img> 태그의 srcset 속성은 각각 다른 환경에서 사용될 이미지 소스를 명시합니다.
srcset 속성은 브라우저가 사용할 수 있는 이미지 소스를 나타내는 하나 이상의 문자열을 콤마(,)로 결합한 리스트를 속성값으로 가집니다.
각 이미지 소스를 나타내는 문자열은 다음과 같이 구성됩니다.
1. 이미지에 대한 URL
2. 옵션으로, 공백 문자(whitespace)를 추가한 후
3.1. 너비 기술자(width descriptor) 또는 뒤에 ‘w’문자가 추가된 양의 정수
: 너비 기술자는 유효한 픽셀 밀도(pixel density)를 계산하기 위해 sizes 속성에서 주어진 소스의 크기에 의해 나눠집니다.
3.2 픽셀 밀도 기술자(pixel density descriptor) : 뒤에 ‘x’문자가 추가된 양의 부동 소수점 수
: 만약 픽셀 밀도 기술자가 명시되지 않는다면, 소스는 기본 기술자인 ‘1x’로 할당됩니다.
예제
<img srcset="/examples/images/people_960.jpg 960w,
/examples/images/people_575.jpg 575w"
sizes="(min-width: 960px) 50vw,
(min-width: 575px) 75vw,
100vw"
src="/examples/images/people_575.jpg" alt="people">
지원하는 브라우저 및 버전
| 속성명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| srcset | 34.0 | 지원함 | 지원하지 않음 | 38.0 | 8.0 | 21.0 |
