ELEMENTS

Editing
  • account_tree
  • bug_report

<picture>

포함된 <img> 요소에 여러 소스를 제공하여 작성자가 화면 픽셀 밀도, 뷰포트의 크기, 이미지 형식 및 기타를 기반으로 사용할 이미지 리소스에 대해 유저 에이전트에 선언적으로 제어하거나 힌트를 제공할 수 있도록 하는 컨테이너(container)이다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    EMBEDDED CONTENT

    임베디드 콘텐츠(embedded-content)가 예상되는 위치

  • 허용된 자식 요소

    SCRIPT SUPPORTING, <IMG>, <SOURCE>

    • 0개 이상의 <source> 요소, 하나의 <img> 요소, 선택적인 스크립트 지원 요소(script supporting)
    • <img> 요소는 <source> 요소에서 지정된 리소스를 사용할 수 없을 때 사용되는 대체를 제공한다.
  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLPictureElement

    [Exposed=Window]
    interface HTMLPictureElement : HTMLElement {
      [HTMLConstructor] constructor();
    };

구문

마크업 형식
<picture>
  <source ></source>
  <img />
</pricure>
Example

결과창(뷰포트)의 크기를 가로 방향으로 변화를 주면 설정된 값에 따라 이미지가 변경된다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

지원 웹브라우저