0

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>
4

1 に答える 1

3

始めるための 1 つのアイデアを次に示します: http://jsfiddle.net/panchroma/sukH8/

新しいクラスを指定したことがわかります 

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

次に、このクラスをすべての画像に適用しました。目的に合わせて .imageClip の高さと幅をいじるだけで済みます。また、狭い画面幅に対して @media リクエストを介して別の値を使用することもできます。

お役に立てれば

于 2013-01-23T17:20:18.843 に答える