Bootstrap carousel: Как я могу использовать изображения разных размеров для разных разрешений экрана?

Question

По соображениям производительности я хочу использовать крупногабаритные изображения для настольных компьютеров и небольших размеров для мобильных устройств, так как мои карусельные слайды.

Я попытался ниже код с ограниченным успехом:

<picture> 
    <source srcset="images/s2.jpg" media="(min-width: 768px)"> 
    <source srcset="images/s2m.jpg"> 
    <img class="second-slide" srcset="images/s2m.jpg" alt="2"> 
</picture> 

Где s2m.jpg есть (маленький) изображение по умолчанию и S2.jpg тем больше один.

Карусель работает и выбирает правильное изображение в зависимости от размера экрана, но теряет первоначальную отзывчивость. То есть слайды не изменяются до ширины родительского элемента (.item). Вместо этого они просто обрезаны.

Каков правильный способ достижения этого?

Answer 1

Фактически, при изменении размера окна карусель не должна уменьшаться по высоте, чтобы справиться с изменяющейся шириной. Это исказит представление страницы. Это особенность бутстрап-карусели.

Что касается отзывчивости, когда вы загружаете страницу на небольших устройствах (я имею в виду отсутствие изменения размера в браузере рабочего стола), вы увидите, что соответствующее изображение слайдов загружается в любом случае. Я думаю, это должно сработать для вас.

---

Однако, если требуется, чтобы изменить размер изображения в высоту при ширине уменьшается, вы можете достичь с помощью CSS

img{ 
    width: 100%; 
} 

Смотрите эту codepen для информации.

Примечание: Вы не можете навязывать стиль всем < IMG>, так что используйте с умом

Answer 2

На мой взгляд, проблема может быть решена с HiSRC Framework - https://github.com/teleject/hisrc. Вы можете использовать атрибуты данных 1x или данных 2x в -tag для определения различных размеров источника изображения в нем:

Например:

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/> 

и вставьте следующий код JQuery в скрипте чтобы "активировать" в hiSRC-рамки и дать элемент вокруг картины класс "hisrc":

$(document).ready(function(){ 
    $(".hisrc img").hisrc(); 
    $(".hisrc img+img").hisrc({ 
    useTransparentGif: true, 
    speedTestUri: '50K.jpg' 
    }); 
}) 

---

<div class="hisrc"> 
    <img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/> 
</div> 

Надеюсь, что это полезно для вас;)

Answer 3

Просто создать класс CSS и использовать его следующим образом:

.fitImage { 
    width: 100%; 
    box-sizing:border-box; 
} 

<picture> 
    <source srcset="images/s2.jpg" media="(min-width: 768px)"> 
    <source srcset="images/s2m.jpg"> 
    <img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2"> 
</picture>