Bootstrap 3 - Равномерное изображение Галерея изображений

Question

Я показываю изображения в своем веб-приложении, используя загрузочную сетку. Как это:

<div class="row"> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/564x/d0/24/ae/d024aec06c754dbc440d6cf84e544704.jpg"> 
    </div> 
    <div class="col-xs-4"> 
    <img class="img-responsive" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
    </div> 
</div> 

Однако, я хочу изображения, которые будут отображаться на равных размеров без искажения портретных изображений. То, что я думаю, помещает изображение в другой div и автоматически обрезает изображения размером 300px x 300px size-div. путем обрезки я имею в виду скрывать часть изображения, которая не может быть одинаково установлена ​​в 300 х 300 div. Как я могу это сделать? https://jsfiddle.net/Lb92rv84/4/

Вы можете видеть, что изображение посередине слишком велико. Я хочу, чтобы он автоматически адаптировался или все они были 300px x 300px. Я хочу, чтобы это было как изображение предварительного просмотра, и когда щелкнуло, просто появилось изображение реального размера. (что я могу сделать)

Answer 1

Установите фиксированную высоту div col-xs-4, затем используйте jQuery, чтобы установить текущий тег img в свойство css col-xs-4 background-image, как это.

$(".img-to-bg").each(function(){ 
var img = $(this).find("img"); 
    $(this).css({ 
    "background-image": "url('"+img.prop("src")+"')", 
    "background-size": cover, 
    //Any other CSS background propriety 
    //If your want the div to be square (same width and height) 
    height: $(this).height() 
    }); 
    img.remove(); 
}); 

пользователя класс IMG-на-BG для Col-хз-4 див

Answer 2

Дайте некоторый класс к IMG тегу и установить их ширину и высоту независимо от отношения вы хотите. Он исправит размер изображения и оперативность ИЗОБРАЖЕНИЯ БУДЕТ ПОДДЕРЖИВАЕТСЯ.

<img class="img-responsive center-block size" src="https://s-media-cache-ak0.pinimg.com/564x/d0/24/ae/d024aec06c754dbc440d6cf84e544704.jpg"> 

CSS-

.size{ 
width:300px; 
height:300px; 
} 

Вы также можете дать центральный блок класс тега изображения, как вы можете увидеть в моем IMG тег. Это будет изображение в центре его родителя.