HTML Bootstrap Carousel Отзывчивое изображение

Question

При использовании карусели из Bootstrap, показанной ниже: Изображение будет изменяться, пока оно не достигнет размера естественного размера изображения.

<article class='image_content_container'> 
    <div id='image_content_id' class='carousel slide image' data-ride='carousel'> 
    <ol class="carousel-indicators"> 
     <li data-target="#image_content_id" data-slide-to="0" class="active"></li> 
     <li data-target="#image_content_id" data-slide-to="1"></li> 
     <li data-target="#image_content_id" data-slide-to="2"></li> 
     <li data-target="#image_content_id" data-slide-to="3"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active image_item"> 
     <img src="Images/A.jpg" alt="First slide"> 
     </div> 
     <div class="item image_item"> 
     <img src="Images/B.jpg" alt="Second slide"> 
     </div> 
     <div class="item image_item"> 
     <img src="Images/C.jpg" alt="Third slide"> 
     </div> 
     <div class="item image_item"> 
     <img src="Images/D.jpg" alt="Fourth slide"> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#image_content_id" role="button" data-slide="prev"> 
     <span class="icon-prev" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#image_content_id" role="button" data-slide="next"> 
     <span class="icon-next" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

Чтобы сделать это более отзывчивым, я попытался сделать все Img в качестве класса .image-элемента и настройка ширины: 100%. Изображения по-прежнему изменяются только до тех пор, пока они не соответствуют естественным размерам. Кроме того, я попытался использовать вместо тега, чтобы увидеть, могу ли я заменить файл изображения более подходящим файлом, когда экран растет. Однако, это не сработало:

... 
<div class="carousel-inner role='listbox'> 
    <div class="item active image_item"> 
     <picture> 
      <Sources media="(min-width: 400px)" srcset="A-Large_1x.jpg 1x, A-Large_2x.jpg 2x"> 
      <img src="A-Small_1x.jpg" alt="First slide"> 
     </picture> 
    ... 
    </div> 
</div> 

В краткой аннотацией, я пытаюсь сделать эту карусель реагировать таким образом, что 1) Изображение будет масштабироваться, чтобы быть больше, чем в натуральную величину, если обязательно (экран значительно расширен) 2) Изображения будут заменены изображением более высокого разрешения (1x или 2x), если необходимо 3) В зависимости от ширины экрана устройства будут отображаться различные размеры одинаковых изображений (A-Small.jps, A-Medium.jpg, A -Large.jpg)

Карусель работает, но изображения не изменяются и не отображаются соответствующая версия изображения на основе ширины экрана устройства. У вас, ребята, есть идеи, как я могу это решить?

Answer 1

Bootstrap предлагает вам отличный класс под названием img-отзыв. Это сделает любую картинку восприимчивой. Просто включите класс в каждый элемент <img></img>. Если вы хотите узнать больше об этом, не забудьте проверить документацию: http://getbootstrap.com/css/#images

.... 
    <div class="item image_item"> 
     <img src="Images/B.jpg" alt="Second slide" class="img-responsive"> 
    </div> 
    .... 

Надежда, что помогает!