Html Bootstrap 3 响应式图像并排相同高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21234410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 responsive images side by side same height
提问by l00per
Is it possible to use 2 responsive images side by side with same height with Bootstrap 3? At the moment the col-sm-4hasn't the same height.
是否可以在Bootstrap 3 中并排使用 2 个具有相同高度的响应式图像？目前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>
Demo Fiddle:http://jsfiddle.net/u9av6/3/
演示小提琴：http : //jsfiddle.net/u9av6/3/
Thanks!
谢谢！
采纳答案by wpdaniel
try this:
尝试这个：
<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>
回答by foxdie
回答by wpdaniel
Here's a working version, with jsfiddle demo.
这是一个工作版本，带有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>
回答by BENARD Patrick
Maybe your problem is that in your code, the padding is not considering.
也许您的问题是在您的代码中，没有考虑填充。
Your 400pxand 800pxis nice, but with padding considering it's not good.
你的400pxand800px很好，但考虑到填充不好。
In this fiddle : http://jsfiddle.net/Lrc5t/1/, with no padding, they keep the same height. But it's not nice without padding...
在这个小提琴中：http: //jsfiddle.net/Lrc5t/1/，没有填充，它们保持相同的高度。但是没有填充就不好...
The padding in each .rowis 15pxleft and right.
每个中的填充.row是15px左侧和右侧。
html:
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:
css：
.nopadding{
padding-left: 0px !important;
padding-right:0px !important;
}
UPDATE :
更新 ：
fiddle: http://jsfiddle.net/Lrc5t/2/
小提琴：http: //jsfiddle.net/Lrc5t/2/
Without paddding is not nice so , just inverse in adding extra padding to right image :
没有填充是不好的，只是相反地向右侧图像添加额外的填充：
<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: You can choose to add your padding at left instead or right... in order to keep the padding in middle. And... nopadding-oneand text-rightclass are to delete...(I forgot)...
ps：您可以选择在左侧或右侧添加填充...以保持填充在中间。还有……nopadding-one和text-right班级要删除……（我忘了）……
UPDATE AFTER COMMENT:*Why 45px ?*Image 1 is float:left so it has just the padding-right at 15px Image 2 has padding left and right at 15px {=30px} So in order do equality (to get same constraints) you need to transmit the total padding to image 2
评论后更新：*为什么是 45px ？*图像 1 是浮动的：左所以它只有 15px 的右填充图像 2 有 15px 的左右填充{=30px} 所以为了做到相等（获得相同的约束），你需要将总填充传输到图像2
回答by Shubham
To make the images displaying side by side, you need to do three things:
要使图像并排显示，您需要做三件事：
1st: make all your images responsive in the html file like this:
第一：使您的所有图像在 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>
This is for putting two images side by side. You could have as many images as possible.
这是为了并排放置两个图像。您可以拥有尽可能多的图像。
2nd:Inside your css, give the height to these images like this:
第二：在你的 css 中，为这些图像提供高度，如下所示：
.img-responsive {display:block; height: 600px; width: 100%;}
The width is set to 100% meaning that both (for this example)/all the images would cover the 100% part of the column width provided in your html code.
宽度设置为 100% 意味着（对于此示例）/所有图像都将覆盖 html 代码中提供的列宽的 100% 部分。
3rd (Most important) :CSS has this property to automatically leave margins/paddings on right and left when you put an image inside a div and this padding is associated with the image or any other element that you want to put inside a div.
第三（最重要）：CSS 具有此属性，可在您将图像放入 div 时自动在左右两侧保留边距/内边距，并且该内边距与您想要放入 div 内的图像或任何其他元素相关联。
To tackle this, go to you css file and for each image, set the left-padding and right padding to 0px just like this:
要解决这个问题，请转到您的 css 文件，并为每个图像将左填充和右填充设置为 0px，就像这样：
.right-image{
padding-left:0px;
padding-right:0px;
}
.left-image{
padding-right: 0px;
padding-left: 0px;
}
This is a working example and explanation of how to put in images side by side using bootstrap!
这是一个工作示例，并解释了如何使用引导程序并排放置图像！
回答by Eugine Joseph
Check this code. This code will look for the smallest height of the image and set it as max-height of the other images. The rest of the image will be hidden. Check it out.
检查此代码。此代码将查找图像的最小高度并将其设置为其他图像的最大高度。图像的其余部分将被隐藏。一探究竟。
<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>
My html is
我的 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>
回答by vikas0713
if you want constant height, should add these properties:
如果你想要恒定的高度，应该添加这些属性：
height: 200x ; # any constant height
object-fit: cover;
Or else you want width constant, should add these properties:
或者你想要宽度恒定，应该添加这些属性：
width: 200px ; # any constant height
object-fit: cover;
object-fit: cover, fixed the problem of stretching up of the image in my case.
object-fit: cover，修复了在我的情况下图像拉伸的问题。
