Лучший способ отобразить полноэкранное изображение, которое меньше, чем экраны с большим разрешением, такие как 27-дюймовый iMac Retina с разрешением 5120 x 2880.

У меня есть стоковое изображение размером 1772 px. Это изображение является самым большим из доступных. Необработанный файл исчез, поэтому я не могу создать изображение шириной 5120 пикселей. Как разметка и CSS будут выглядеть для этого изображения, если я хочу иметь возможность красиво растянуть его по всей ширине iMac?

Минимальные требования:

• Я использую Bootstrap, поэтому он должен работать с этим. И желательно со встроенным классом img-responsive. Нужно ли мне иметь тег img в div container-fluid?
• <picture>-элемент необходимо использовать, так как задействована художественная режиссура. Когда окно просмотра достигает 767 пикселей и ниже, я показываю изображение в портретном режиме.

Вот код, с которым я экспериментирую:

<picture>
    <source media="(min-width: 768px)"
            srcset="/img/landscape/large.jpg 1772w,
                /img/landscape/medium.jpg 886w,
                /img/landscape/small.jpg 443w"
            sizes="100w" />

    <source srcset="/img/portrait/large.jpg 955w,
                /img/portrait/medium.jpg 640w,
                /img/portrait/small.jpg 320w"
            sizes="100vw" />

    <img src="/img/landscape/medium.jpg" alt="" />
</picture>

В настоящее время Firefox и Chrome хорошо растягивают изображение, но IE10 останавливается на 1772 пикселях и оставляет пробел справа от изображения.

Если я установлю img на width:100%, изображение будет растягиваться, но я не понимаю, правильный ли это подход, поскольку в Bootstrap они используют max-width.