個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ