Bootstrap列將圖像的高度設置爲文本的高度

Question

我爲自己做了一個2列的行，其中左邊一個用文本填充，右邊一個用作圖像，現在由於圖像比文本大，我想將圖像縮小到文本的大小，然後使用右拉類來保持圖像正確對齊。

這裏是我現在有：

<div class="row"> 
    <div class="col-md-6"> 
     // text here 
    </div> 
    <div class="col-md-6"> 
     // image here 
    </div> 
</div> 

出於某種原因，我不能自舉C​​SS添加到的jsfiddle，所以我不能顯示輸出，但我可以嘗試解釋圖像，右列其中是比左文本列更大，所以我想，圖像與文本列高度

我希望這是有道理的

Answer 1

我認爲像這樣規模...... DEMO

這需要高度尺寸從COL-MD-8類，並把它分配給圖片...

function checkWidth() { 
var a=$('.col-md-8').height(); 
$('img').height(a); 
} 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

HTML部分：

<div class="row"> 
     <div class="col-md-8 col-sm-8 col-xs-8"> 
      <p>Lots here...With tof text he four tiers of grids available you'e bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p> 
     </div> 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
      <div class="imgAbt"> 
       <img class="img-responsive" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" /> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
     <div class="col-md-8 col-sm-8 col-xs-8"> 
      <p>Lots of text here...Wi8h the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p> 
     </div> 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
      <div class="imgAbt"> 
       <img class="img-responsive" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" /> 
      </div> 
     </div> 
    </div> 
</div>