« 2014年05月 | メイン | 2014年09月 »
2014年08月22日
ボックスの中心に画像を強制的に配置
ボックスの中心に画像を配置する場合は普通はcssだけで実現可能
ボックスにcssでdisplay:table-cellあたり適応してvertical-align:middleで昔のテーブルみたいに。
ただ、画像の方がボックスより大きくボックスからはみ出たぶんはoverflow:hiddenで見切る場合は難しい。
画像サイズや画角が不明な場合もうjavascriptの出番となるようだ。
そこでjqueryで画像を中心に配置するものを作りました。
使い方はjqueryの読み込み後上記も読み込んで
$(".box").imgcenter(140,100,1);
です。最後の１は小さい画像を大きくするかです。
140 100はボックスのサイズです。
<div class="box"><img src="hoge.jpg"></div>
これで class="box" のボックス内の画像を中心自動配置してくれます。