<picture><source> relativ zur Breite von <picture>

Question

Ich versuche, ein responsives Bild auf der Website zu setzen. Ich habe den folgenden Code

<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> 

Die Größe des Bildelements wird durch das enthaltene div bestimmt.

Die Größe des enthaltenen div wird zufällig sein. es kann direkt im .container sein, es kann auch in .col-sm-6 sein

Problem ist hier die maximale Breite relativ zum Viewport. Ich möchte die Quelle basierend auf der Breite des Bildelements ausgewählt werden. Ist das möglich? Wenn das so ist, wie?

PS. Ich bevorzuge eine Lösung ohne Javascript.

EDIT: Was ich vermisse ist eine Möglichkeit, die Auswahl einer basierend auf seiner eigenen Breite zu haben. Ich nehme an, das ist nicht im HTML5-Standard?

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')); 
     } 
    }; 

Für jetzt habe ich ein Bild mit srcset und ein wenig Javascript.

Dies ersetzt die Größe attibute mit der Breite des übergeordneten Elements. Wo die Standardgrößen = 400px.

Dies nutzt Javascript :(.

Answer 2

Können Sie die Abfragen für die maximale Breite ändern, um stattdessen Prozentsätze zu verwenden? Wenn Ihr Bildelement die Größe ändert, werden auf der gleichen prozentualen Breite des Bildes verschiedene Quellen ausgewählt.