Question

我正在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;
}

任何帮助都会受到赞赏！

Answer 1

您遇到的问题修复起来相当简单，虽然没有实际的标记，以及您在调整列大小时用来覆盖默认Bootstrap行为的CSS，但我无法给您一个确切的修复。

基本上：中间图像看起来比其他两个更大的原因是因为中间列是 - 一种方式或另一种方式 - 比两个外部列略宽。

因此，当您将max-width: 100%应用于图像时，它们都会流向其列的整个宽度。中间的一个略宽，意味着图像本身比其他两个略微扩大。

使用Firebug / INspector来确定为什么中间列更宽，你会得到答案！

Answer 2

我使用max-width对样式做了一些小调整，但是通过设置min-height和max-height属性来控制高度。 https://github.com/Gregory-Phillips/twitter-bootstrap-sandbox/blob/master/imageHeight.html 我将覆盖置于结束</head>之上，只是为了将其保持在可见区域。它似乎保持了响应性......也许这就是你能看到的东西？

Answer 3

因为图像将根据col-sm4宽度调整大小。你也使用padding-left：15px; padding-right：左列1px。填充右：15像素; padding-left：右列1px。在这两种情况下，由于给出填充

，图像将被吱吱/调整大小

但在中间的图像。你从左和右给出了只有1px的填充。请注意，与其他图像相比，图像将更少地调整/调整大小。

所以如果你想要的图像大小应该相等，那么你必须在3张图像上从左侧和右侧给出相等的填充。

Twitter Bootstrap 3.0响应式图像高度问题

3 个答案: