html - Bootstrap - 2 列匹配高度，1 列全宽图像，1 列文本

Question

我很难让某些东西在 Bootstrap 3.3.7 中工作。 fiddle 在这里:https://jsfiddle.net/rrqt9e98/

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color: red;">
      <img src="http://placehold.it/500x333">
    </div>

    <div class="col-md-6" style="background-color: yellow;">
      <p>
      Content column
      </p>
    </div>
  </div>
</div>

目前输出是这样的:

我想要做的是让我的图像(原始尺寸为 500*333 像素)占据左侧栏的整个宽度。我在 img 的 CSS 中设置了 width: 100% 以实现此目的，遵循此处给出的建议:How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

我不确定为什么图像后面会出现红色背景颜色，因为我希望图像与 col-md-6 边缘齐平。所以我尝试添加:

img {
  padding: 0;
  border: 0;
}

我还希望右侧的黄色列与图像的高度相匹配。我在我的元素中使用 jQuery Match height 插件，所以可以选择它，除非有 CSS 解决方案。

我想要的整体效果是一个 2 列布局，其中图像占据整个左侧列，右侧列与左侧列的高度相匹配。在移动断点(sm 或更低)我想水平堆叠这两列。

我希望它看起来像这样(我在 Fireworks 中模拟了它只是为了展示它应该是什么样子):

有人可以用这个给我指出正确的方向吗？

Answer 1

Bootstrap 中的列有间距，以左右填充的形式出现，这就是为什么您会看到红色背景:https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - 你可以通过移除填充来测试它，像这样:https://jsfiddle.net/rrqt9e98/2

与其尝试让右列拉伸(stretch)以填充与左列相同的高度，不如将颜色应用于该行:

<div class="container">
  <div class="row" style="background-color: yellow;">

    <div class="col-md-6 no-gutter" style="background-color: red;">
      <img src="http://placehold.it/500x333">
    </div>

    <div class="col-md-6 no-gutter">
      <p class="p1">
      Content column
      </p>
    </div>
  </div>
</div>

使用相关的 CSS:

.no-gutter
{
  padding-left: 0;
  padding-right: 0;
}

.p1
{
  padding: 1em;
}

Fiddle，在右栏的段落中添加了一些填充:https://jsfiddle.net/rrqt9e98/5/