html - Bootstrap 列将图像列高度设置为文本列高度

Question

我自己做了一行，有 2 列，左边一列是文本，右边一列是图像，现在由于图像比文本大，我希望图像按比例缩小到文本，然后使用 pull-right 类使图像保持右对齐。

这是我现在拥有的:

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

出于某种原因，我无法将 bootstrap css 添加到 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>