【センタリングシリーズ】固定コンテナ内の可変サイズ画像の水平・垂直センタリング_html/css_WEB-ITnose

一般的に商品ページを作成する際、商品写真の幅と高さが固定されている場合、幅を最大幅に設定し、高さを適応させると、一部の写真が変形します。高さがコンテナを超えているため、画像の一部を切り取る必要があります。そこで、まず、画像の比率がどのようなものであっても、横が縦よりも縦が横よりも縦が大きくても、幅と高さの最大値を一律に設定して、コンテナを超えないようにすることで、画像がコンテナを超えないようにすることを考えました。このように変形します。次に、画像の可変サイズと固定コンテナ内での水平方向と垂直方向のセンタリングの問題を扱いたいと思います。

参考リンク:

Zhang Xinxu: 可変サイズと複数行テキストの画像の縦横中央揃え

w3cplus Desert: CSS で作成した画像の縦横中央揃え

それぞれの方法を比較した結果、Zhang Xinxu の方法を見つけました① 透明な gif 画像 + 背景の配置 、私たちは常に商品ページの背景の代わりに img を使用します。背景の処理が難しくなることが少し心配なので、通常はこの方法を使用したくありません。表示:テーブルセルと文字サイズコントロールを中央揃えにする, IE7で画像にリンクを貼るとずれてしまう場合は③ 表示:インラインブロックと文字サイズコントロールを中央揃えにする効果はあなたが望むものではありません。④の方法は空白の画像を使用して垂直方向の配置を実現します。

比較と総合的な検討の結果、以下の方法がまとめられました。

1. 推奨される使用方法 (font-size:0 と空白タグを使用します)

2. 推奨スキル。 display:table-cell と display:inline を使用する

おそらくこの方法は最初の方法よりも面倒で、IE 互換のハックを作成する必要がありますが、display-table とvertical-middle を使用する方が良いと思います最新のブラウザでは、画像の垂直方向の中央揃えを実現する方法を学ぶ価値があります。将来的にローエンドのブラウザとの互換性が必要ない場合は、この方法の方が適しているかもしれません。

3.jqueryメソッド。

画像を親要素の背景画像に変換し、背景画像を親要素の中央に表示し、自身の透明度を「0」に設定します。これにより、画像を中央に配置する効果も得られます。

この方法は主にこの考え方を学ぶことです。ただし、自分で試した結果、大きな画像には適していないことがわかり、imgをmax-widthとmax-heightに設定しても役に立ちません。背景に変えた後も、元の画像サイズが表示されます。なのでここには載せません。ご興味がございましたら、上記の Desert w3cplus へのリンクをご覧ください。