Настройка изображений Side by Side & отзывчивый в bootstrap

Question

Я написал код, в котором 4 изображения хранятся внутри div бок о бок в cols.

Ниже приведен код:

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" /> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
      <div class="col-xs-3 col-sm-3 col-md-3"> 
       <img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/> 
      </div> 
     </div> 
</div> 

Это выглядит в полном окне Размер:

enter image description here

Теперь, когда размер окна минимизированы, изображения выглядит следующим образом:

enter image description here

Я хочу, чтобы изображение выглядело так, как оно выглядит в полном размере, даже после минимизации без растяжения изображения.

Мне удалось получить представление выше изображений без его растяжения, когда я удалил стиль: ширина: 100%; высота: 70%; но затем в полноразмерном окне изображения имели пробелы между собой.

Пожалуйста, помогите мне разобраться в этом.

Answer 1

Возможно добавление img-responsive класс для изображения устранит проблему.

Answer 2

Использование

class="img-responsive"

сделает ваши изображения реагировать на разных устройствах. В конкретных, и в соответствии с Bootstrap's documentation, это добавит

max-width: 100%; 
height: auto; 
display: block; 

к вашим элементам изображения.

Вы должны потерять свои встроенные стили

style="width:100%; height:70%;" 

, как они переопределяют все остальное (Protip: никогда не использовать их).

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

div.col-xs-3 { 
    padding: 0; 
} 

Here - пример кода.

Answer 3

@FredRocha эй Фред, я попытался использовать только IMG-reponsive & потери встроенных стилей, но затем изображения смотрели, как это в полном размере окна экрана:

enter image description here