HTML 참조 매뉴얼

HTML 태그 전체

HTML: <picture> 요소

HTML <picture> 요소는 다른 표시를 위해 0개 이상의 <source> 요소와 1개의 <img> 요소를 포함하여 제공합니다./장치 상황에 따라 이미지 버전을 제공합니다. 브라우저는 가장 일치하는 서브 <source> 요소를 선택하고, 일치하는 것이 없으면 <img> 요소의 src 속성에 있는 URL을 선택합니다. 그런 다음, 선택된 이미지는 <img> 요소가 차지하는 공간에 표시됩니다.

예제

화면 크기에 따라 다른 크기의 이미지를 표시하며, 일치하는 것이 없거나 브라우저가 picture 속성을 지원하지 않으면 img 요소를 사용합니다:

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>기본 튜토리얼(oldtoolbag.com)</title>
</head>
<body>
<h2>picture　요소</h2>
<picture>
　　<source　media="(min-width:　650px)"　srcset="/run/html/views.png">
　　<source　media="(min-width:　465px)"　srcset="/run/html/default.jpg">
　　<img　src="/run/html/haha.gif"　　style="width:auto;">
</picture>
</body>
</html>

보여보기 ‹/›

정의

picture 요소는 다른 장치에서 다른 이미지를 표시할 수 있게 하며, 일반적으로 반응형으로 사용됩니다.

HTML5 <picture> 요소를 도입하여 이미지 자원 조정을 더 유연하게 할 수 있습니다.

<picture> 요소는 0개나 많은 <source> 요소와 1개의 <img> 요소를 포함할 수 있으며, 각 <source> 요소는 다른 장치와 다른 이미지 소스를 매칭하며, 일치하지 않으면 <img> 요소의 src 속성에 있는 URL을 선택합니다.

주의: 　　　　

　　　　　　　　<img> 요소는 마지막에 위치합니다. 　<picture> 요소 다음에, 해당 속성을 지원하지 않는 브라우저에서는 <img> 요소의 이미지를 표시합니다. 　　　　

브라우저 지원

표에서의 숫자는 그 요소를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

IEFirefoxOperaChromeSafari

HTML 4.01 와 HTML5 간의 차이

<picture> 속성은 HTML5 새로 정의된.

전역 속성

<picture> 태그 지원 HTML의 전역 속성。

이벤트 속성

<picture> 태그 지원 HTML의 이벤트 속성。

HTML: <q> 태그 HTML: <pre> 태그