Picture element — где применить отзывчивый класс img

Скажем, у меня есть следующий элемент изображения:

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

Поэтому я спрашиваю, где именно должен применяться такой класс? На a <source>? На <img>чем ? На <picture>чем ? Везде?

1 ответ