jQueryで画像サイズを取得して上下左右中央配置にする方法

2018.02.23 2018.03.26jQuery
jQueryで画像サイズを取得して上下左右中央配置にする方法

画像を中央配置する場合、以下のような形でpositionやmarginを使って指定することがあります。

■HTML

<div>
<img src="images/img_01.png" alt="">
</div>

■CSS

div {
width: 100%;
height: 500px;
position: relative;
}
div img {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}

昔からある一般的な方法ですし、どんなブラウザでも表示が安定しているためよく使う人もいるかもしれません。

しかしこの方法だと、画像のサイズを指定する必要があるため、使い回りなどできなくて若干不便です。

ということで今回は、jQueryで画像サイズを取得して上下左右中央に配置する方法をご紹介します。

jQueryで画像サイズを取得して上下左右中央配置にするソース

■HTML

<div>
<img src="images/img_01.png" alt="">
</div>

■CSS

div {
width: 100%;
height: 500px;
position: relative;
}
div img {
position: absolute;
top: 50%;
left: 50%;
}

■jQuery

$(window).on("load resize",function(){
var img = $('div img'),
imgWidth = img.width() / 2,
imgHeight = img.height() / 2;
img.css({
marginLeft: '-' + imgWidth + 'px',
marginTop: '-' + imgHeight + 'px'
});
});

jQueryで画像のwidthとheightの2分の1の値を取得し、ネガティブマージンとして指定しています。

画像サイズを個別に指定する必要がなくなるので、中央配置する画像に共通のクラスを付与しておくなどすれば、一発で指定できます。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら