Question

我自己排成一排有2列，左边一行填充文字，右边一张是图像，现在因为图像比文字大，我希望图像按比例缩小到文本，然后使用右拉类保持图像正确对齐。

这就是我现在所拥有的：

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

由于某种原因，我无法将引导程序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>

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

1 个答案: