1

私はレスポンシブデザインに精通しておらず、必要な目的の解決策を見つけることができないようです. これが私が望むレイアウトのモックアップです：

ここに画像の説明を入力

ここでの目標は、画像を隙間なく image-grid コンテナーに収めることです。このコンテナーは、ブラウザーのビューポートの右端と下端まで、残りのスペースをすべて使用する必要がありますが、それを超えることはないため、スクロール バーはありません。すべての画像は同じ寸法です。

行と列の分布は、不要な歪みを防ぐために、ビューポートのサイズと画像のサイズに依存します。この比率は、ビューポートのサイズが特定のブレークポイントに達すると変化しますが、ブレークポイントの間では、画像は比例スケーリングによって微調整されます。

ブレークポイントはメディア クエリで管理され、サイトはモバイル フレンドリーである必要があります。その点については、 「vh」ソリューションを 使用できません。

私は主に最も軽い実装を探しているので、純粋な CSS ソリューションが理想的です。Masonry JS ライブラリと派生ライブラリIsotopeについて聞いたことがありますが、まだそれを試す機会がありませんでした。

この件に関するヘルプは大歓迎です。

4

2 に答える 2

0

パーセンテージwidthとを使用すると、ビューポートを垂直方向に埋めるのは簡単media-queriesです。ここでの問題は、ビューポートの高さを埋めることです。

CSSには常にありますがheight: X%、高さが固定された親内の要素でのみ機能し、高さが固定されているとあまり反応しません。でも：

ビューポート ユニットの紹介:

1vhはビューポートの高さの 1% に等しいため、50vhはビューポートの半分を埋め、 はビューポート100vhの高さ全体に等しくなります。ビューポート幅vwの単位もあります。

ビューポート ユニットのブラウザ サポート。

ビューポートの高さを埋める:

ラッパー要素に がある場合、ビューポートの高さheight: 100vh全体を埋め、その子が を利用できるようにします。height: X%

たとえば、親要素に がheight: 50vhあり、その子要素に がheight: 50%ある場合、子要素の高さはビューポートの高さの 25% に等しくなります。この例。

モックアップではheight: 100vh、ナビゲーションとメイン エリアを含むラッパー要素で使用し、メイン要素heightを 100% 未満に設定して、ナビゲーション要素用のスペースを確保することをお勧めします。次に、画像(または画像のコンテナー)の高さを適切な割合に設定します。

最後に、クライアントのビューポートの高さ(ピクセル単位で設定)を探すために set をheight介して上記の画像/画像コンテナーのパーセンテージを変更します。media-queries

(パーセンテージが 0.5 ピクセルになると、ブラウザーがコンテンツをレンダリングするのが難しい場合があることに注意してください。したがって、これらの丸め誤差を避けるために、25% ではなく 24.99% などのわずかに低い値を使用することをお勧めします)。

別の問題が発生します。

これを行うと、おそらく画像が不自然に歪んでいることに気付くでしょう。これに対する書面による解決策はありませんが、この設定の画像を要素と同じように修正し、代わりにそれらの要素のサイズを変更できるはずbackground-imageですbackground-size: cover。

要素として画像が必要な場合<img>は、他の解決策を見つける必要があります。

これがいくつかの洞察を提供することを願っています。

于 2013-09-25T19:04:56.877 に答える
0

純粋な CSS で得られる最も近いのは Flexbox ですが、ブラウザーのサポートはラッピングをサポートするものに限られています ( http://caniuse.com/flexboxを参照してください。IE10 はラッピングを部分的にサポートしている唯一のブラウザーです)。現在、そのリストは IE10、Opera、および Chrome に限定されています。

http://codepen.io/cimmanon/pen/fqoxj

マークアップが次のようになっていると仮定します。

<header>
  Header
</header>

<nav>
  Nav
</nav>

<main>
  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>What a cute kitten</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>So adorable!</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>Irresistibly cuddly</figcaption>
  </figure>
</main>

CSS は次のようになります。

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  body {
    display: flex;
  }
}

header {
  background: yellow;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

nav {
  background: orange;
  -webkit-flex: 1 15em;
  -ms-flex: 1 15em;
  flex: 1 15em;
}

main {
  -webkit-flex: 3 30em;
  -ms-flex: 3 30em;
  flex: 3 30em;

  /* everything below this line is all that really matters
   * everything above this line is controlling the main layout */
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  main {
    display: flex;
  }
}

figure {
  display: inline-block; /* fallback for old browsers */
  /* note that the images are 200px wide, this has to match or Chrome does weird stuff */
  -webkit-flex: 1 200px;
  -ms-flex: 1 200px;
  flex: 1 200px;
}

figure img {
  min-width: 100%;
  height: auto;
}

モバイル デバイスの場合、ナビゲーションが横に表示されなくなるまでスケーリングしたら、メディア クエリを安全に使用して画像のサイズを制御できます。

http://cssdeck.com/labs/l2hw4aon

figure {
  display: inline-block;
}

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

@media (max-width: 40em) {
  figure {
    width: 30%;
  }
}

@media (max-width: 30em) {
  figure {
    width: 45%;
  }
}

@media (max-width: 20em) {
  figure {
    width: 100%;
  }
}
于 2013-09-26T14:18:40.550 に答える