Bootstrap - 2列匹配高度，1與全寬圖像，1與文本

Question

我在Bootstrap 3.3.7中難以獲取某些內容。小提琴是在這裏：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 * 333px的原始大小）佔據左手欄的整個寬度。我在我的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高度插件，因此可以選擇這個插件，除非有一個CSS解決方案。

我想要的整體效果是一個2列布局，其中圖像佔據了左手邊的全部列，右邊的列與左邊的列的高度相匹配。在移動斷點處（sm或更低），我想橫向堆疊這兩列。

我希望它看起來像這樣（我已經在Fireworks中嘲笑了只是爲了顯示它應該是什麼樣子）：

請可有人點我在這個正確的方向？

Answer 1

列在引導有排水溝，在左右填充的形式，這就是爲什麼你看到的紅色背景：https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - 你可以通過刪除填充來測試此項，如下所示：https://jsfiddle.net/rrqt9e98/2

而不是嘗試讓右側列進行拉伸以填充與左側相同的高度lumn，只適用於你的顏色到該行來代替：

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