jqueryで画像サイズを取得する方法
可変する画像を使用する際に便利
jqueryで画像サイズを取得して、別要素（今回はdevタグ）に直接styleで記述する方法をまとめました。
バナーだったり、可変する画像だったりサイズが定まらない画像を使用する際に知っておくとなにかと便利だと思います。
HTML
<!-- img_name.jpgの画像サイズを直接スタイルで記述 --> <div class="js-div-size" style="width: $px; height: $px;"> </div> <div class="js-img-size"> <img src="img_name.jpg"> </div>
class=”js-img-size”のdivタグ内にある画像のサイズを取得して、class=”js-div-size”のdivタグに直接スタイルでwidthとheightが記述されます。
jquery
$(function(){
/**
* 画像サイズの取得
*/
$(window).load(function(){ // ウィンドウを更新した後に画像サイズを取得
var height=$('.js-img-size img').height();
var width=$('.js-img-size img').width();
$('.js-div-size').css('height', height + 'px');
$('.js-div-size').css('width', width + 'px');
});
});
ウィンドウを更新する前に画像サイズを取得してしまうと、width: 0px; height:0px;となってしまう場合があるのを回避するために、はじめにウィンドウを更新した後に実行するようにしておきます。
可変するバナーをページ上部に確保したい場合はこちらをご参考ください！
可変する画像にラベルを配置するときに便利！
私は固定枠内で可変する画像の特定位置にラベルを配置する必要があり、今回この方法で実装しました。
固定枠と可変する画像には、すでにpositionが指定されているのでここを変更することはできません。
固定枠と画像の間に新たに、可変画像サイズを取得する用のdivタグ（赤枠）を用意。
そのdivタグ（赤枠）にposition: relative;を設定、直接スタイルで可変する画像のサイズを記述し、そこを基点にラベルを配置しました。
他にも方法があるのかもしれませんが、自分で考えて解決できると嬉しいですよね！
そこがマークアップの面白さだと思います！
おすすめのjQuery参考書はこちら！
posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013年03月
