既にあるのかもしれませんが、だからといってどうやって検索したらいいかわからないものは自分で作るしかない…ということで表題のものを作りました。
tategakibunko/jquery.image-size-assign · GitHub
概要
どういうものかというと、ようするに以下のようなことをするものです。
<!-- before --> <img src="http://placehold.it/350x150"> <!-- after --> <img src="http://placehold.it/350x150" width="350" height="150">
使い方
こんな感じです。
$(function(){ $("img").imageSizeAssign({ maxSize:{ width:500, height:500 }, onSize:function(size){ return size; }, onComplete:function(){ //console.log("all sizes are set"); } }); });
オプションにmaxSize
を指定すると、あふれた時に元サイズのレートを保ったままリサイズします。
例えば上の例だとmaxSize
が500x500なので、1000x1000の画像だったら、500x500にリサイズされます。
参考にしたソース
javascript - Can I sync up multiple image onload calls? - Stack Overflow