<picture> 태그<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
picture 태그는 웹 개발자가 이미지 리소스를보다 유연하게 지정할 수있게합니다.
picture 요소의 가장 일반적인 용도는 반응 형 디자인의 아트 디렉션입니다.
뷰포트 너비에 따라 하나 또는 그 이상의 이미지를 확대 또는 축소하는 대신 여러 개의 이미지를 사용하여 브라우저 뷰포트를보다 멋지게 채울 수 있습니다.
picture 요소에는 하나 이상의 태그 라는 두 개의 다른 태그가 있습니다.
source 요소에는 다음과 같은 특성이 있습니다.
브라우저는 속성 값을 사용하여 가장 적합한 이미지를로드합니다. 브라우저는 일치하는 힌트와 함께 첫 번째 source 요소를 사용하고 다음 source 태그는 무시합니다.
img 요소는 picture 선언 블록의 마지막 자식 태그로 필요합니다.
img 요소는 picture 요소를 지원하지 않는 브라우저 또는 source 태그가 일치하지 않는 브라우저에 대한 이전 버전과의 호환성을 제공하는 데 사용됩니다.
picture 요소는 video 및 audio 요소와 유사하게 작동합니다. 다른 소스를 설정하고 기본 설정에 맞는 첫 번째 소스가 사용됩니다.
현재 IE13버전에서만 작동합니다.