我正在使用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 »</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 »</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 »</a></p>
</div>
</div>
</diV>
答案 0 :(得分:3)
这是让您入门的一个想法:http://jsfiddle.net/panchroma/sukH8/
你会看到我指定了一个新类
.imageClip{
width:300px;
height:175px;
overflow:hidden;
}
然后将此类应用于所有图像。你只需要使用.imageClip的高度和宽度来满足你的目的,你也可以通过@media请求使用不同的值来缩小屏幕宽度。
希望这有帮助