css - Twitter Bootstrap 规范图像大小的方法？

Question

我正在使用 Bootstrap 为房地产经纪人做一个网站，MLS 图像有各种古怪的尺寸，这给我一个时髦的布局。处理此问题的最佳方法是什么，以便文本从每行中的相同位置开始？

在 css/js 中是否有一个好的解决方案，或者我应该在一些标准化纵横比的 imagemagick 处理后复制图像？

http://jsfiddle.net/MgcDU/1055/和下面的来源

<div class="container">
    <div class="row">
        <div class="span4">
            <h4>123 Happy Tree Lane</h4>
            <img src="http://placehold.it/767x575" class="img-rounded"/>
            <p>A-list networks niches ROI tagclouds architect, users strategic granular applications maximize functionalities streamline</p>
            <p><a class="btn" href="#">View Details &raquo;</a></p>
        </div>
        <div class="span4">
            <h4>666 Doomsday Road</h4>
            <img src="http://placehold.it/400x266" class="img-rounded"/>
            <p>Semantic e-tailers networks users user-contributed action-items. E-commerce architectures networking envisioneer next-generation</p>
            <p><a class="btn" href="#">View Details &raquo;</a></p>
        </div>
        <div class="span4">
            <h4>000 asdf</h4>
            <img src="http://placehold.it/768x511" class="img-rounded"/>
            <p>Productize e-tailers users redefine e-business synergize bandwidth user-contributed, "front-end reintermediate,"</p>
            <p><a class="btn" href="#">View Details &raquo;</a></p>
        </div>
    </div>
</diV>

Answer 1

这是一个让您入门的想法:http://jsfiddle.net/panchroma/sukH8/

你会看到我指定了一个新类

.imageClip{
width:300px;
height:175px;
overflow:hidden;
}

然后将这个类应用于所有图像。您只需要使用 .imageClip 的高度和宽度来满足您的目的，您也可以通过 @media 请求使用不同的值来缩小屏幕宽度。

希望对你有帮助