blogger - sourceSet 연산자

sourceSet 은 반응형 이미지를 만들 때 사용합니다. 브라우저의 화면 크기에 따라 이미지 크기도 다르게 지정할 수 있습니다. resizeImage 와 다른 점은 NewSize 에 여러 이미지의 너비를 쉼표로 구분하여 설정한다는 점을 제외하면 동일합니다.

함 수	설 명
sourceSet	반응형 이미지 만들 때 사용 imageURL : 원본 이미지 URL [ Array NewSize ] : 새로운 크기(쉼표로 구분) Ratio : 비율

<img>태그에 이미지의 크기를 다르게 지정하려면 src 와 srcset 속성을 함께 사용해야 합니다. src 와 srcset 에는 원본 이미지를 지정하고 NewSize 에는 이미지 너비를 쉼표로 구분해서 정수로 설정할 수 있습니다. 예를 들면 아래와 같이 설정합니다.

<img expr:src='data:post.featuredImage'
  expr:srcset='sourceSet(data:post.featuredImage, [256,512,945,1684])'/>

이미지 URL를 문자로 지정하려는 경우 아래와 같이 사용합니다.

<img 
src='https://2.bp.blogspot.com/-RIAAzuCpn1k/W2RiDLbS06I/…/s1600/ad_meditate_690.gif'
  expr:srcset='sourceSet(
    "https://2.bp.blogspot.com/-RIAAzuCpn1k/W2RiDLbS06I/…/s1600/ad_meditate_690.gif",
    [256, 512, 945, 1684], 
    "1:1")'/>

이 경우는 브라우저 화면 크기에 따라 256, 512, 945, 1684(px) 크기인 이미지가 1:1 비율로 자동으로 재설정됩니다.