1

私の Web サイトに画像のギャラリーを表示しようとしていますが、Google Chrome の奇妙な動作に苦労しています。Opera では、すべて正常に動作します。

ここに私のコードが書かれたペンがあります

私が達成しようとしていること

行ごとに4つのセルを持つテーブルがあります。各セルは、テーブル全体の幅の 25% です。画像を一種のグリッドに表示したい。すべてのセルには、定義済みの縦横比があります。これを行うには、padding-bottom トリックを使用して、適切な高さの要素 (私の場合は図) を作成します。要素内では、画像を引き伸ばさずにできるだけ大きく画像を表示したい（そして中央に配置したい）。

問題 (ペン)

Chrome（v。26）では、ポートレート画像は親の高さよりも高くなっています（設定してもmax-height: 100%）

部分解 (ペン)

画像を作成して問題を解決しましたposition: absoluteが、画像を中央に配置できません。絶対に配置しながら画像を中央に配置する方法を誰かが知っている場合は、それを回答として投稿してください。

アップデート

わかりやすくするために、解決策を含むペンと問題を含むペンを分けました。

4

2 に答える 2

2

問題は、画像に高さを計算するための適切な参照フレームがないため、max-height (または高さ) をパーセンテージで使用しても期待どおりに機能しないことです。

画像の親の 1 つでピクセルの高さを指定する場合は、各子でパーセンテージ ベースの高さを使用できます。各子が親からの高さを判断できる限り、これは機能します。これが機能するためには、絶対配置された要素の親が持つposition:relative(または絶対的) 必要があることに注意してください。

現時点では、画像は、高さがわかっている唯一の DOM ノードである body ノードに従ってスケーリングされています。

于 2013-05-05T12:14:48.093 に答える
1

画像をインライン要素内にラップすることで問題を解決できました（アンカータグを使用しました）。

これが機能する理由はわかりませんが、わかり次第更新を投稿します。

ここで完全な修正コードを確認できます

于 2013-05-05T13:10:33.167 に答える