Ответ 1
попробуйте следующее:
<div class="col-sm-4"><img src="http://placehold.it/400x400" height="220" /></div>
<div class="col-sm-8"><img src="http://placehold.it/800x400" height="220" /></div>
Bootstrap 3 отзывчивых изображения бок о бок одинаковая высота
Можно ли использовать 2 отзывчивых изображения бок о бок с одинаковой высотой с помощью Bootstrap 3? В настоящий момент col-sm-4 не имеет одинаковой высоты.
<div class="container">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/400x400" />
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/800x400" />
</div>
</div>
</div>
Демо-скрипт: http://jsfiddle.net/u9av6/3/
Спасибо!
Ответы
Ответ 2
здесь мое решение с простой оболочкой. Идея состоит в том, чтобы иметь дело с форматом :
jsfiddle демонстрация
Ответ 3
Здесь рабочая версия с jsfiddle demo.
<div class="col-sm-4"><img style="max-height:220px" src="http://placehold.it/400x400" /></div>
<div class="col-sm-8"><img style="max-height:220px" src="http://placehold.it/800x400" /></div>
Ответ 4
Возможно, ваша проблема в том, что в вашем коде прокладка не учитывается.
Ваши 400px и 800px хороши, но с отступом, учитывая, что это не хорошо.
В этой скрипте: http://jsfiddle.net/Lrc5t/1/, без отступов, они сохраняют одну и ту же высоту. Но это не приятно без заполнения...
Отступ в каждом .row равен 15px слева и справа.
html:
<div class="row">
<div class="col-sm-4 nopadding"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
CSS
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
ОБНОВЛЕНИЕ:
скрипт: http://jsfiddle.net/Lrc5t/2/
Без paddding не так приятно, просто инвертируйте добавление дополнительного дополнения к правильному изображению:
<div class="row">
<div class="col-sm-4"><img class="img-responsive" src="http://placehold.it/400x400"></div>
<div class="col-sm-8 nopadding-two"><img class="img-responsive" src="http://placehold.it/800x400"></div>
</div>
.nopadding-two{
padding-right:45px !important;
}
ps. Вы можете добавить дополнение к левой стороне вместо или справа..., чтобы сохранить отступ в середине. И... nopadding-one и text-right класс должны удалить... (я забыл)...
ОБНОВЛЕНИЕ ПОСЛЕ КОММЕНТАРИИ: * Почему 45px? * Изображение 1 - float: left, так что у него есть только padding-right на 15px Изображение 2 имеет отступы влево и вправо при 15px {= 30px} Поэтому, чтобы сделать равенство (чтобы получить те же ограничения), вам нужно передать общее отступление к изображению 2
Ответ 5
Чтобы изображения отображались бок о бок, вам нужно сделать три вещи:
1st: все ваши изображения реагируют в файле html следующим образом:
<div class="row">
<div class="col-xs-3 left-image" >
<img class="img-responsive" src="../img/fourthimg.jpg">
</div>
<div class="col-xs-9 right-image">
<img class="img-responsive" src="../img/firstimg.jpg" >
</div>
</div>
Это для размещения двух изображений рядом. Вы можете иметь как можно больше изображений.
2nd: Внутри вашего css укажите высоту этих изображений следующим образом:
.img-responsive {display:block; height: 600px; width: 100%;}
Ширина установлена равной 100%, что означает, что оба (для этого примера)/все изображения будут покрывать 100% часть ширины столбца, предоставленную в вашем HTML-коде.
3rd (Самое главное): CSS имеет это свойство, чтобы автоматически оставлять поля /paddings справа и слева, когда вы помещаете изображение внутри div, и это дополнение связано с изображением или любым другим элементом что вы хотите вставить в div.
Чтобы справиться с этим, перейдите к файлу css и для каждого изображения, установите для поля слева и справа дополнение к 0px так:
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
Это рабочий пример и объяснение того, как размещать изображения бок о бок с помощью бутстрапа!
Ответ 6
Проверьте этот код. Этот код будет искать наименьшую высоту изображения и установить его как максимальную высоту других изображений. Остальная часть изображения будет скрыта. Проверьте это.
<script>
setTimeout(function () {
equalheight('.portfolio-item');
}, 3000);
function equalheight($that) {
$minHeight = 0;
$($that).each(function (index) {
$thisHeight = $(this).children('.portfolio-link').innerHeight();
if ($minHeight == 0) {
$minHeight = $thisHeight;
} else {
if ($minHeight > $thisHeight) {
$minHeight = $thisHeight;
}
}
});
$($that).children('.portfolio-link').css('max-height', $minHeight);
$($that).children('.portfolio-link').css('overflow', 'hidden');
}
</script>
Мой html
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-01.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Round Icons</h4>
<p class="text-muted">Graphic Design</p>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal" style="max-height: 225px; overflow: hidden;">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="images/trip-02.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Startup Framework</h4>
<p class="text-muted">Website Design</p>
</div>
</div>
Ответ 7
если вы хотите постоянную высоту, следует добавить следующие свойства:
height: 200x ; # any constant height
object-fit: cover;
Или вы хотите, чтобы константа ширины, должна добавить эти свойства:
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, исправлена проблема растяжения изображения в моем случае.