Question

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

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

以下的来源

<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请求使用不同的值来缩小屏幕宽度。

希望这有帮助

Twitter Bootstrap标准化图像大小的方法？

1 个答案: