Twitter Bootstrap 3.0响应式IMG高度问题
我正在Twitter Bootstrap 3中构建一个快速的HTML原型，但遇到了一个响应图像高度的小问题。
我定义了三列，每列中有一个图像。我将图像设置为响应式，并修改了默认引导程序中每列之间的填充。我的问题是，中间列中的图像比其左侧和右侧列中的图像略大。这是我的问题的一个快速屏幕截图：http://d.pr/i/z5AS
如何修复以使每列中的所有三个图像具有相同的高度？
HTML：
<div class="container">
<div class="row">
<div class="col-sm-4 item-left">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
<div class="col-sm-4 item-center">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
<div class="col-sm-4 item-right">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
</div>
</div>CSS：
img {
max-width: 100%;
height: auto;
margin: 0;
}
.item-left {
padding-right: 1px;
}
.item-center {
padding: 0 1px;
}
.item-right {
padding-left: 1px;
}在这方面的任何帮助都将不胜感激！
回答 3
Stack Overflow用户
发布于 2013-11-22 01:16:11
你遇到的问题很容易修复，尽管没有实际的标记，以及你在调整列大小时用来覆盖默认Bootstrap行为的CSS，我不能给你一个确切的修复方法。
基本上:中间的图像看起来比其他两个更大的原因是因为中间的列-以这样或那样的方式-非常略宽于两个外部列。
因此，当您将max-width: 100%应用于图像时，它们将全部排列到其列的整个宽度。中间的图像略宽意味着图像本身的缩放比例略高于其他两个图像。
使用Firebug/检查器找出为什么中间那一栏更宽，你就会得到答案！
Stack Overflow用户
发布于 2014-03-02 07:43:52
我使用max-width对样式做了一个小调整，但通过设置min-height和max-height属性来控制高度。https://github.com/Gregory-Phillips/twitter-bootstrap-sandbox/blob/master/imageHeight.html我将重写放在关闭的</head>上，只是为了让它保持在可见的区域。它似乎保持了响应性..。也许这就是你可以看的？
Stack Overflow用户
发布于 2015-12-23 20:39:55
因为Image将根据col sm4宽度调整大小。您还可以在左列上使用padding:15px；padding:1px。右填充:15px；左填充:右列1px。在这两种情况下，图像将被压缩/调整大小，因为提供了填充
但在中间的图像中。从左到右，你只给出了1px的填充。请注意，与其他图像相比，图像将被压缩/调整大小较少。
因此，如果您希望图像大小等于，则必须在3个图像上从左侧和右侧给出相等的填充。
https://stackoverflow.com/questions/20113460
复制相似问题
腾讯云开发者
