個別記事のページです

2015年12月 9日(水)
このエントリーをはてなブックマークに追加

画像を枠の中央に適切な比率で配置するこつ

商品カタログなどでありがちな条件として、以下のようなものがあります。

1.これから入れる画像のサイズ、縦横の比率はわかりません。
2.でも既定の枠の中にきっちり収めて、枠のサイズは変えないようにしたいです。
3.上下からも左右からも中央寄せにしてください。

そんなときの方法です。
ポイントは「枠のサイズがきっちり決まっている」「縦横ともにセンタリングする」です。
centeringcode.png
クラス名mt_lists_backのdivが枠になります。

html部分
画像を配置するときはwidth,heightともにautoにします。

css部分
枠はwidth,heightをpxなどの単位で指定、さらにdisplay:table-cell、text-align:center、vertical-align:middleを指定。
imgには、max-width,max-heightを指定しておきます。

こうしておくと、どんな比率の画像を配置しても、縦横どっちでも最大幅を基準に適正な比率で中央配置して表示します。
centering.png
カタログやリストの写真を、整理されたイメージで綺麗に見せたい時におすすめです。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ