web-dev-qa-db-ja.com

Twitterを使用してレスポンシブな写真のグリッドを作成する方法Bootstrap高さが異なる場合

どうすればTwitter Bootstrap 3の「img-レスポンシブ」画像を表示できますが、写真のグリッドが流れるように高さを設定できます（下の画像とは異なります）。

画像の高さ属性と最大高さ属性を設定しようとしましたが、高さを「！important」で設定しない限り無視されているようですが、見た目が悪く、占有率が非常に低いため、実際にはグリッドに表示されません。水平方向のスペース。

Divの背景画像として配置することに関連するいくつかのトリックを試しました。overflow:hidden、しかし私が試したすべては1）動作せず、2）ハッキーのようです3）めちゃくちゃに見えます。 （例として これ を通過しようとしました）

大きなモニターで大きく表示できるようにしたいので、画像は塗りつぶしの領域よりも少し大きいので、背景画像を機能させたとしても、拡大されたバージョンの画像が表示されます。 、背景が収まるように縮小することを知らないため。

これはよくあることのようです-それを処理するためのやや簡単な方法はありますか？

photo gallery

htmlcsstwitter-bootstrapresponsive-designphoto-gallery
11
Dave

私はブートストラップに精通していませんが、各imgをdiv.wrapperでラップし、次のようなものをdivに適用できると確信しています。

div.wrapper {
    width: 33%;
    height: 200px; /* or whatever... */
    overflow: hidden;
    float: left;
}

次に、画像のスケーリングを処理するには：

.wrapper img {
    max-width: 100%;
    height: auto;
}

編集-代替方法

目的を達成するには、imgタグの代わりにbackground-size: coverを使用して、代替要素で背景画像を使用するのが最善の方法だと思います。

HTML：

<a href="path/to/full_size.jpg" class="image" style="background-image: url(path/to/image.jpg);">Link Text Here</a>

imgタグを使用する代わりに、グリッド内の画像ごとに繰り返します。

CSS：

.image {
    display: block;
    text-indent: -1000px; /* hide link text */
    overflow: hidden;
    background-size: cover;
    width: 33%;
    height: 200px;
    float: left;
}

IEバージョン8以下では、問題がある場合、バックグラウンドサイズはサポートされていないことに注意してください。

11
Josh Harrison

Bootstrapのグリッド配置/高さの問題には3つの全体的なアプローチがあります

CSSはこのようなアプローチのみです。

http://bootply.com/85737

このような「clearfix」アプローチ（x列ごとに反復が必要）。

http://bootply.com/89910

最後に、IsotopeまたはMasonryプラグインを使用できます。これは、アイソトープ+ Bootstrap 3：を使用する実際の例です。

http://bootply.com/109446

Bootstrap高さの問題 の詳細

5
Zim

まだ誰もトリミングを提案していないので、2セントを投入します。

大きくて不規則なバージョンの画像のグリッドバージョンでは、事前定義された幅x高さを使用します。実際、大きいバージョンが不規則ではなかったとしても、私はおそらくこれを行うでしょう。基盤となるマークアップは、Foundation、Bootstrapなど、グリッドのままです。

このようにして、いつでも大きい/元のサイズにリンクし、必要に応じてグリッドまたはサムネイル画像を使用できます。静的サイトの場合はこれを手動で行い、動的サイトの場合はさまざまなスタイルを自動的に提供する画像プロセッサを使用します。 example.com/image-styles/thumb/photo.jpg。

明らかに、異なる画像を異なる方法でトリミングする必要がありますが、どこでトリミングが行われるかを気にしない場合は、div内に画像を設定するだけで済みます。およびoverflow: hidden;全体： http://jsfiddle.net/785gN/

その欠点は、すべての画像が縦向きではなく、正方形または横向きであると想定していることです（またはその逆）。または、提案されているようにbackground-size: cover;の背景画像を使用します。

0
Charlie Schliesser