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

Question

我在Bootstrap 3.3.7中遇到困难。小提琴在这里：https://jsfiddle.net/rrqt9e98/

ruby_block

输出目前是这样的：

我想要做的是让我的图像（原始尺寸为500 * 333像素）占据左手栏的整个宽度。我已根据<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> 在我的CSS中设置了width: 100%来实现此目的，并遵循此处提供的建议：How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

我不确定为什么会出现图像背后的红色背景颜色，因为我希望图像与img边缘齐平。所以我尝试添加：

col-md-6

我也希望右手黄色列与图像的高度相匹配。我在我的项目中使用jQuery Match高度插件，因此可以选择，除非有CSS解决方案。

我想要的整体效果是2列布局，其中图像占据完整的左手列，右手列匹配左手列的高度。在移动断点（img { padding: 0; border: 0; } 或更低），我想水平堆叠这两列。

我希望它看起来像这样（我在Fireworks中嘲笑它只是为了展示它应该是什么样子）：

请有人能指出我正确的方向吗？

Answer 1

Bootstrap中的列有左右填充形式的装订线，这就是您看到红色背景的原因：https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - 您可以通过删除填充来测试这一点，如下所示：https://jsfiddle.net/rrqt9e98/2

不要试图让正确的列伸展以填充与左列相同的高度，而只需将颜色应用于行：

<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;
}

小提琴，右栏中的段落添加了一些填充：https://jsfiddle.net/rrqt9e98/5/

Answer 2

HTML：

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

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

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

CSS：

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}