2

Wordpressとユーザーがアップロードした画像を使用しています。Bootstrapを使用してレスポンシブ画像ギャラリーを構築しようとしていますが、問題が発生しています。

Picture.png http://img339.imageshack.us/img339/6838/picturehq.png jsfiddle でも見つけることができます（複数列に切り替わるのに十分な大きさの出力ウィンドウを設定してください）

現実世界の課題のいくつかと私の制約のいくつか：

  • 画像がすべて同じサイズになるわけではありません
  • 画像はすべて同じサイズである必要はありません
  • ギャラリーはレスポンシブである必要があります（画像は縮小/拡大でき、2、3、4列から変更できます）
  • キャプションは任意の長さにすることができ、自動切り捨て/非表示などにする必要があります。
  • 画像に適切なアスペクト比を持たせたい、たとえばwidth:100%; height:100%
  • キャプションはどういうわけか並んでいるはずです

私が試したこと

レスポンシブデザインの前に画像ギャラリーを作成するために使用したトリッキーな方法の1つは、Wordpressに2つの画像サイズを作成させることでした。ギャラリーのサムネイルになります。ギャラリーを生成するとき、境界を超えていないかどうかを確認し、その画像をサムネイルに使用します。もう1つの方法は、必要なサイズに近い画像を使用し、その画像を、background-url位置がに設定された包含要素のとして設定することcenter/centerです。これは固定幅のデザインには最適ですが、レスポンシブにはうまく機能しません。:)

さらに、レスポンシブデザイン/ cssで私が知る限り、背景画像のスケールを設定する方法はありません。また、CSSを介したセット<img>ではなく、タグを使用して画像をコード化する方が意味的に正確であるように思われます。<div>background-image

レスポンシブデザインがないと、列数も固定される可能性があるため、clear:leftn番目ごとに画像を実行して、奇妙な折り返しが発生しないようにすることができます。ただし、レスポンシブデザインでは、列数が2、3、4などから変更される場合があります。

また、レスポンシブデザインがなければ、Javascriptを使用して画像/サムネイルコンテナをループし、それらの高さを標準化することができます。レスポンシブデザインでこれを行うことは不可能ではありませんが、高さが最初にパーセンテージとして設定され、すべてのリソースが読み込まれるまで正確でない可能性があるため、ページが完全に読み込まれるのを待つ必要があります。次に、ウィンドウのサイズ変更や向きの変更で何が起こるかを心配する必要があります。これはハックのようであり、それを行う正しい方法ではありません。

また、要素のmin-height領域を設定し、画像を含むをに設定し、それもに設定してみました。結果は良くなりますが、それでも素晴らしいものではありません。.thumbnail<a>display:blockmin-height

3列： Picture.png http://img818.imageshack.us/img818/9472/picturemk.png

4列：

写真1.pnghttp://img525.imageshack.us/img525/706/picture1uh.png

では、完璧なサイズの画像を使用せずに、見栄えの良いレスポンシブ画像ギャラリーを作成するにはどうすればよいでしょうか。

4

1 に答える 1

1

これは「完全なサイズの画像」を必要としませんが、CSSのみのソリューションの場合、 toを含む特定のサイズのli要素が必要です（画像の比率が歪んでいないように、トリミングされる場合があります）親コンテナによる）。overflowhiddenli

定義された要素と組み合わせてli要素を 設定すると、均一なプレゼンテーション/配布が可能になり、ギャラリーはウィンドウ/親の幅に応じて自己適応およびリフローできます- ：float: left;widthheightul

li {
    width: 160px;
    height: 160px;
    padding: 4px;
    float: left;
    position: relative;
    overflow: hidden;
}

li p {
    position: absolute;
    color: #fff;
    opacity: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 -1px 0;
}

li:hover p {
    opacity: 1;
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
    -webkit-transition: all 1s linear;
}

JS Fiddleデモ（with float: left;）。

（このdisplay: inline-blockソリューションでは、withに関して子孫要素を絶対的に配置できないように見えるため、ソリューションを削除liしdisplayました。）

JavaScriptソリューションが可能な場合は、jQueryが必要なMasonry（およびjQuery以外のMasonry）やIsotope（jQueryが必要）などもあります。

ただし、sの幅が制限されていて、liクロスブラウザーサポートの互換性がいくらか制限されている場合は、CSS列を使用できます。

ul {
    -moz-column-width: 160px;
    -moz-column-gap: 0;
    -ms-column-width: 160px;
    -ms-column-gap: 0;
    -o-column-width: 160px;
    -o-column-gap: 0;
    -webkit-column-width: 160px;
    -webkit-column-gap: 0;
    column-width: 160px;
    column-gap: 0;
}

JSフィドルデモ。

于 2012-11-18T14:04:24.323 に答える