Home
Blogger
Operators

Blogger - 11 sourceSet 연산자

Blogger sourceSet 연산자 - 이미지의 크기를 화면 크기마다 다르게 지정. 쉼표로 구분하여 이미지 너비를 설정.

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 비율로 자동으로 재설정됩니다.

Post a Comment