次の画像要素があるとします。
<picture>
<source srcset="images/something-1100@1x.jpg 1x, images/something-1100@2x.jpg 2x"
media="(min-width: 840px)">
<source srcset="images/something-839@1x.jpg 1x, images/something-839@2x.jpg 2x"
media="(min-width: 480px)">
<img src="images/something-479.jpg"
srcset="images/something-479@1x.jpg 1x, images/something-479@2x.jpg 2x" alt="Something">
</picture>
中間の画面幅がある場合、画像が応答しない（たとえば、親要素がオーバーフローする）のは当然のことです。
すぐに行うべきことは、次のクラスを適用することです。
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
では、このようなクラスを正確にどこに適用する必要があるのでしょうか? <source>？_ で<img>？で<picture>？どこにでも？