1

レスポンシブ Web サイトにフォト ギャラリーを表示する必要があるページがあり、Retina ディスプレイもサポートされています。グリッドは、次のように、特定のコンテナーを比例的に満たすブロックで構成する必要があります。

  • If the screen width is >= 1200pxグリッドは 4 列で構成される必要があります (各ブロックの幅は 25%)。
  • If the screen width is < 1200px and >= 768pxグリッドは 3 列で構成される必要があります (各ブロックの幅は 33%)。
  • If the screen width is <= 767pxグリッドは 2 列で構成される必要があります (各ブロックの幅は 50%)。

すべてのグリッド ブロックは 2:3 の比率のサイズである必要があり、幅 1980 ピクセルのビューポートでグリッド ブロックを測定すると、約 500 ピクセルであることがわかります (これは制限ではありません。説明が必要な場合に役立つ測定データにすぎません)下）。もちろん、これはクエリを
介して簡単に実現でき、2:3 の比率を使用します。私が尊重しなければならない制限を説明するために、できるだけ多くのデータを提供しようとしています。@mediapadding-top: 66.66666666666667%

グリッド
のサムネイルはさまざまなサイズと縦横比であり、グリッド ブロック領域全体をフィッティング/カバーしながら、垂直方向と水平方向にそれぞれのグリッド ブロックの中央に配置する必要があります。
グリッドはレスポンシブなので、狭いビューポートのブロックに合わせて親指を比例的にスケーリングする必要があります。
さらに複雑なことに、Retina ディスプレイをサポートする必要があるため、親指のサイズを 2 倍にして半分に縮小し、グリッド ブロックにも収まるようにする必要があります。

これはどのように達成できますか？(できればCSS経由のみ)

追加データ:
私は joomla を使用しています! 2.5 をこのプロジェクトの CMS として使用しており、クライアントに画像を追加する非常に簡単な方法を提供する必要があります。私が見つけた最良かつ最も簡単な解決策は、Simple Image Gallery です。このプラグインに必要なのは、自動サム生成手順 +<ul>ページ内の自動生成グリッドだけであり、必要に応じて HTML+css 出力構造をオーバーライドするのは非常に簡単です。

Retina ディスプレイに関しては、正しい @2x 構文を提供する方がよいはずですが、私はあまり気にしません。パフォーマンスの問題に関しては、すべてのディスプレイに 1 つのダウンスケールされた画像を与える方がもちろん扱いやすいと思いますが、img の重みを処理するための本当に効果的で効率的な方法でもあります!
参照用にこれを参照してください。基本的には、寸法が 2 倍になり、jpg 圧縮が 20 程度の画像を使用し、CSS を使用して画像を半分に縮小しても、通常のディスプレイと Retina ディスプレイの両方に適した見栄えの良い画像が得られます。また、元のサイズのイメージから最大 25% 軽量化されています。
私はこれを自分でテストしましたが、これが非常にうまく機能していることがわかります。ほとんどの場合、通常のサイズの画像よりも重く、ごくわずかです (使いやすさと利点と比較して)。

4

2 に答える 2

1

これを行うには、次の手法を組み合わせて使用​​します。

于 2013-01-03T18:43:39.143 に答える
0

長い質問ですが、異なるサイズの画像のセンタリングのみについての場合は、次のようにすることができます:

フロートする Div が必要です。それらは同じ高さと幅になります (ただし、クエリごとに調整できます)。

その後、これらの div のそれぞれに、垂直方向と水平方向の中央に別の div があります。

  <div class="outer">
    <div class="table">
    <div class="image"></div>
     </div>
    </div>

基本的には、外側の div をフロートし、display table-cell を .table div に適用してから、中央に垂直方向の中央揃えを適用して、垂直方向のセンタリングを行います。

重要

display:table セルを含むフローティング div は、垂直方向の配置を無視します! したがって、追加の div です。

http://jsbin.com/ajunol/2/edit

.outer {
  height:100px;
    width:100px;
  border:solid;
  float:left;
  margin:10px;
}
.table {
  height:100px;
  width:100px;
  border:solid;
    display:table-cell;
  vertical-align:middle;
}
.image {
  height:50px;
  width:50px;
  background-color:red;
  margin:0 auto;
  max-width:100%;
}

高さ、幅、背景色は無視できますが、画像が含まれるボックスを超えないように最大幅を 100% にする必要があります。

私の例では、画像は div として表されていますが、そこには明らかに div ではなく画像タグがあります。これを処理するには、div をクラス イメージに置き換えて、イメージに置き換えます。

于 2013-01-03T17:18:58.030 に答える