親要素のサイズに合わせて画像をリサイズしてフィットさせるプラグインは既存のものをいくつか試したのですが、不具合が発生したり理想通りにならなかったので自作しました。ということでご紹介です。
サンプル
まずは「サンプル」からご覧ください。
サンプルでは640×340ピクセルの画像と320×640ピクセルの画像を100×100ピクセルの親要素(div)にフィットさせています。
概要を説明すると、
・親要素にcss[overflow: hidden;]を指定
・親要素と画像のサイズを取得して、画像が親要素の中央になるようにcss[position]で左または上にずらす
ということを行っています。
HTML
jQuery本体とプラグインを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/img-resize.js"></script>
imgに任意のクラス名を付けます。
(サンプル画像は「PLACEHOLD.IT」から表示させていただきました)
<div class="box"><img src="http://placehold.it/640x340/27709b/ffffff" class="resize"></div> <div class="box"><img src="http://placehold.it/320x640/27709b/ffffff" class="resize"></div>
bodyの閉じタグの直前でプラグインを呼び出します。
画像に付けたクラス名を指定して下さい。
$(function(){･･･}); ではなく、
$(window).on(‘load resize’, function() {･･･}); で呼び出して下さい。
画像より先にスクリプトが実行されてしまうとうまくリサイズされないため、loadでページを全て読み込んだ後に実行します。
また、レスポンシブに対応するためにresizeで画面のリサイズが行われる度に実行するようにしています。
<script>
$(window).on('load resize', function() {
$('.resize').imgResize();
});
</script>
CSS
親要素は縦横のサイズと overflow: hidden; が必須です。
$(window).on(‘load resize’, function() {･･･}); で呼び出しているので、一瞬リサイズ前の画像が表示されてしまうのを防ぐため、画像に付けたクラスには display: none; を指定します。
.box{
width: 100px;
height: 100px;
margin: 20px;
overflow: hidden;
}
.resize{
display: none;
}
最後に・・・
ちょっと力技ではありますが、IE・Firefox・Chromeで問題なく動作しているようなので、まぁいいかなと。
サンプルのダウンロードは「こちら」からどうぞ。