1

次の要件を持つレスポンシブ サムネイル グリッドを作成しようとしています。

  • サムネイルは反応して拡大および縮小します
  • 個々のサムネイル画像コンテナは正方形で、縦横比は 1:1 です
  • 個々のサムネイル画像の縦横比は異なる場合がありますが、正方形のサムネイル コンテナー内で水平方向と垂直方向の中央に配置されます。

非応答バージョンは、私のサイトhttp://www.artrogue.com/collections/allで確認できます。繰り返しますが、1:1 の正方形コンテナーの高さと幅を定義したため、これは機能します。

レスポンシブでは、幅が変わるため、正方形のコンテナーの高さを定義できません。高さは動くターゲットです。

これが CSS で実行できるかどうかはわかりませんが、jQuery や JavaScript を使用してもかまいません。

4

1 に答える 1

0

たとえば、プログラムで画像に空白を追加することで画像を正方形にする方法を見つけることができる場合は、次のソリューションを使用できます：http: //dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/

画像がポートレートかランドスケープかがわかっていて、アスペクト比が同じであれば、マージンをパーセンテージで調整することもできると思います。

それ以外にも同様の問題があります：https ：//stackoverflow.com/questions/13905116/horizo​​ntally-and-vertically-center-text-inside-fluid-square-grid

于 2012-12-16T20:21:48.107 に答える