<picture><source> 너비는 <picture>입니다.

Question

나는 웹 사이트에 반응 형 이미지를 넣으려고합니다. 나는 다음과 같은 코드를 가지고있다.

<picture> 
<source media="(max-width: 400px)" srcset="cache/images/image.w400.jpg"></source> 
<source media="(max-width: 800px)" srcset="cache/images/image.w800.jpg"></source> 
<source media="(max-width: 1000px)" srcset="cache/images/image.w1000.jpg"></source> 
<source media="(max-width: 1200px)" srcset="cache/images/image.w1200.jpg"></source> 
<source media="(max-width: 1920px)" srcset="cache/images/image.w1920.jpg"></source> 
<img src="/imgresizer/images/image.jpg"> 
</picture> 

그림의 크기는 포함 된 div에 의해 결정된다.

포함 된 div의 크기는 임의적입니다. .container에 직접있을 수도 있고 .col-sm-6에있을 수도 있습니다.

문제는 뷰포트를 기준으로 한 최대 너비입니다. 그림 요소의 너비에 따라 소스를 선택하고 싶습니다. 이것이 가능한가? 그렇다면 어떻게?

추신. 내가 자바 스크립트없이 해결책을 prefere.

편집 : 내가 무엇을 놓치고있는 선택은 자신의 너비를 기반으로하는 방법입니다. hte HTML5 표준에 포함되어 있지 않습니까?

Answer 1

<img class="image-responsive" data-srcset="cache/images/image.w400.jpg 400w, cache/images/image.w800.jpg 800w, cache/images/image.w1000.jpg 1000w, cache/images/image.w1200.jpg 1200w, cache/images/image.w1920.jpg 1920w" data-src="images/image.jpg" sizes="720px" src="images/image.jpg"> 

window.onload = function() { 
     var images = document.getElementsByClassName('image-responsive'); 
     for(var i = 0; i < images.length; i++) { 
      var width = images[i].parentElement.offsetWidth; 
      images[i].setAttribute('sizes', width+'px'); 
      images[i].setAttribute('src', images[i].getAttribute('data-src')); 
      images[i].setAttribute('srcset', images[i].getAttribute('data-srcset')); 
     } 
    }; 

지금은 srcset과 약간의 javascript로 이미지를 만들었습니다.

이것은 attibute 크기를 부모의 너비로 바꿉니다. 기본 크기는 400 픽셀입니다.

이 :(자바 스크립트를 사용합니다. 난 당신이 또한 만 화면에 해당 하나를 표시, 모든 이미지를로드 할 공연과 CSS 솔루션이 일을한다고 가정하기 때문에

Answer 2

대신 최대 너비 쿼리를 변경하여 백분율을 사용할 수 있습니까? 이렇게하면 그림 요소의 크기를 조정할 때 그림의 너비와 동일한 너비에 따라 다른 원본을 선택하게됩니다.