web-dev-qa-db-ja.com

CSS flexboxまたはgrid-layoutを使用したレスポンシブ画像ギャラリー

私は、ユーザーがサムネイルの幅、サムネイルの高さ、マージン（サムネイル間）を設定できるImage-Gallery-Widgetに取り組んでおり、ウィジェットはすべての画像のサムネイルを、各画像の幅と高さが同じニースグリッドに表示します。

css-flexboxまたはcss-gridが、コードで行と列を定義する必要なしに、またブレークポイント/メディアクエリを必要とせずにこれを可能にするかどうか疑問に思っています。

サムネイル-画像はアンカーでラップされているため、ギャラリーアイテム（またはグリッドアイテム）は次のようになります。

<a href="#" class="gallery-item">
    <img src="myimage" width="300" height="200" />
</a>

ギャラリーアイテムはコンテナdivを完全に埋める必要があります。つまり、行の最後のサムネイルとコンテナdivの右端の間にギャップがあってはなりません（行を埋めるのに十分なアイテムがない場合、つまり3つのアイテムの場合を除く） ftが連続していますが、アイテムが8つしかない場合、3番目の行には2つのアイテムと、右側に1つのアイテムと同じ幅のギャップがあります。

サムネイルの品質を低下させたくないので、ギャラリーアイテムをユーザーが設定したサムネイル幅より広くすることはできません。この例では、幅が300pxであると想定します。ギャラリーアイテム間のマージンはユーザーが固定および設定します。行を埋めるのに十分なアイテムが残っていない場合は、単に左揃えにします。つまり、次のようにします。

enter image description here

CSSでブレークポイントを定義したり、行/列の構成にhtmlを追加したりしたくありません。ブラウザに、コンテナに収まるだけのギャラリーアイテムを並べて配置するだけでよいのです。右側にギャップがある場合（つまり、3つのサムネイル* 300pxの幅= 900pxですが、コンテナの幅は1000pxです）、ブラウザはグリッドアイテムを縮小して、もう1つのギャラリーアイテムが収まるようにし、ギャップをなくす必要があります。各ギャラリーアイテムの周囲にマージンを定義できる必要があります。

このgifで、（ブラウザの幅を変更したときの）望ましい応答動作を確認できます。

Desired responsive behaviour

Gifに表示される内容は、flexboxなしで実行されますが、flexboxで回避したいと思っていた大量のCSSが必要です。flexbox 、しかし、まだ完全に頭を動かすことができていません。

ヒントをありがとう！

cssflexboxcss-grid
5
zıəs uɐɟəʇs

flex機能を使用するだけで、タスクを実行できます。 IE11での部分的なサポートに注意してください： http://caniuse.com/#feat=flexbox 。

これらのスタイルをコンテナに配置します。

_.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}
_

ラッパーのスタイル：

_.gallery a {
  flex-grow: 1;
  flex-basis: 125px;
  max-width: 300px;
  margin: 5px;
}
_

画像のスタイル：

_.gallery img {
  height: 100%;
  width: 100%;
}
_

画像間のスペースは、marginを使用して簡単に定義できます。画像の比率を維持するために、たとえばリンク（_<a>_）を画像（_<img>_）のラッパーとして使用できます。

さらに、画像の拡大を防ぐために、アンカーに_flex-grow_、_flex-basis_、および_max-width_属性を適用できます。最後の行の画像のストレッチにも問題がありました。そのためのハックは、コンテナ内に_n - 1_（nは画像の数）の空のアイテムを配置することです。

画像のwidthとheightを_100%_に設定すると、アスペクト比を維持しながら、_max-width_属性で定義された幅まで自動的に拡大されます。

作業例を確認してください：[〜＃〜] fiddle [〜＃〜]

11
luke

メディアブレークポイントを使用してもかまわない場合は、new CSS Grid Layout を使用してください。 IE10 +をサポートするためにプレフィックスを付けることを忘れないでください。

グリッド：

.gallery {
    display: grid;
    grid-gap: 5px;
}

レスポンシブ画像：

.gallery img {
    width: 100%;
}

メディアブレークポイント（Bootstrap 4）から取得した値）

@media (max-width: 575.98px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 768.98px) and (min-width: 576px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); 
    }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (min-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); 
    }
}

jsFiddle

1
midzer