sourceSet 연산자는 반응형 이미지를 만들 때 사용합니다. 브라우저의 화면 크기에 따라 이미지 크기도 다르게 지정할 수 있습니다. resizeImage와 다른 점은 NewSize에 여러 이미지의 너비를 쉼표로 구분하여 설정합니다.
sourceSet 연산자
| 함수 | 설명 |
|---|---|
| imageURL | 원본이미지 URL |
| NewSize | 새로운 크기 (정수) |
| Ratio | 비율 |
예제
이미지의 크기를 화면 크기마다 다르게 지정하려면 src 및 srcset 속성을 함께 사용합니다. img 태그에서 src 및 srcset에는 원본 이미지를 지정하고 NewSize 속성으로 쉼표로 구분하여 이미지 너비를 설정할 수 있습니다.
예를 들면 아래와 같이 설정합니다.
<img expr:src='data:post.featuredImage'
expr:srcset='sourceSet(data:post.featuredImage, [320,768,1024,1440])'/>만약 이미지 URL로 지정하려는 경우 아래와 같이 사용합니다.
<img
src="https://1.bp.blogspot.com/-aGJWF3iJguE/YDL4WaF8nII/…/s0/ad_parallax_830.png"
expr:srcset='sourceSet(
"https://1.bp.blogspot.com/-aGJWF3iJguE/YDL4WaF8nII/…/s0/ad_parallax_830.png",
[320,768,1024,1440],
"1:1")'/>이 경우 브라우저 화면 크기에 따라 320,768,1024,1440 px 크기인 이미지가 1:1 비율로 자동으로 재설정됩니다.