HTML5 "picture"- 태그가 작동하지 않음

HTML5 picture -element에 문제가 있습니다. 최대 너비가 600px 인 기기에 대해 더 작은 이미지를 표시하고 싶습니다. 다른 장치는 큰 그림을 얻어야합니다. 크롬은 항상 img -tag (대체)의 영상을 보여주기 때문에 내가 브라우저 윈도우의 폭을 줄이면HTML5 "picture"- 태그가 작동하지 않음

<picture alt="logo"> 
    <source src="img/b2b-logo-small.png" media="max-width: 600px"> 
    <source src="img/b2b-logo.png" >    
    <img class="logo" src="img/b2b-logo.png" /> <!-- Fallback --> 
</picture>

아무런 반응이 없습니다. 왜?

출처

2013-09-06 alexP

주로 'picture' 태그가 HTML5의 일부가 아니기 때문입니다. 그것은 제안입니다. 지금까지 내가 아는 한, 어떤 브라우저도 현재 구현하지 않습니다. –

아, 좋아. 방금이 기사에서 읽었습니다. (http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/) Thx. – alexP

그림 요소 isn't supported in any browsers yet, 그것은 여전히 유일한 제안입니다. 브라우저가 <picture>을 지원하지 않을 때마다 해당 대체 브라우저를 방문 할 것이므로 Chromium build that supports it 또는 무엇인가 있다면 유일한 시간은 아닙니다.

JS 폴리필을 사용하는 데 문제가없는 경우 <picture>이 구현할 수있는 방식으로 반응 형 이미지를 계속 사용할 수 있습니다. Responsive Images 커뮤니티 그룹의 구성원 중 하나 인 Scott Jehl이 <picture>을 밀어 내며 picturefill이라고 썼습니다.

코드를 약간 다르게 작성해야합니다. HTML 태그를 사용하는 대신 데이터 속성을 사용합니다. picturefill 워드 프로세서에서 예 :

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> 
     <span data-src="small.jpg"></span> 
     <span data-src="medium.jpg"  data-media="(min-width: 400px)"></span> 
     <span data-src="large.jpg"  data-media="(min-width: 800px)"></span> 
     <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span> 

     <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> 
     <noscript> 
      <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> 
     </noscript> 
    </span>

출처

2013-09-06 19:03:37 Jason

Thx. 지금 나는이 "문제"에 대해 약간의 자기 쓰기 JS를 사용한다 : http://fiddle.jshell.net/Pisi2012/HZrjj/ – alexP

현대적인 브라우저에서도 공식 W3C HTML5 사양에 속하지 않으므로 아직 지원되지 않습니다 (목록에는 elements에 포함되지 않음). 변경 될 수 있습니다.

출처

2013-09-06 19:03:23 federicot

https://www.w3.org/wiki/HTML/Elements 업데이트 링크 감사. – Akash

당신은 각 크기 쇼에 ID를 사용하여 다음을 찾고있는 크기의 각 주변 일부 미디어 쿼리를 작성하고 미디어 쿼리에서 이미지를 숨길 수

출처

2013-09-06 19:09:47 Travis

2014 년 11 월 Chrome 39이 출시되고 버전 38 이후로 picture 태그를 지원할 때 코드의 문제는 브라우저가 source 태그의 src 속성을 지원하지 않기 때문에 src="img/b2b-logo-small.png"입니다. srcset="img/b2b-logo-small.png"이어야합니다.

자세한 내용은 the spec을 참조하십시오.

체크 아웃 picturePolyfill도 덜 완성적이지만 훨씬 빠르며 그림 채우기가 더 빠릅니다.

출처

2014-11-21 11:40:40 verlok

크롬에서 지금 작동합니까? 최신 크롬에서 제대로 작동하지 않습니다. –

HTML5 "picture"- 태그가 작동하지 않음

답변

관련 문제