ぺぺろぐR

多分制作備忘録

親要素にぴたっと画像が収まるようリサイズjQueryプラグイン|imgLiquid

親要素に指定したサイズに上下左右を拡大縮小・トリミングしていいかんじに収めてくれるプラグイン。
ブログのアイキャッチとかでサイズや比率がバラバラになりそうなときに使うと便利。

プラグインダウンロード

karacas/imgLiquid · GitHub

使い方

まずはjQuery本体とプラグインを読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/imgLiquid-min.js" type="text/javascript">

cssで要素のサイズを設定して…

.box {
width: 200px;
height: 200px;
}

jsで該当classを指定

$(document).ready(function() {
    $(".box").imgLiquid();
});

でで、画像を入れる親要素にクラスをつける

<div class="box"><img sorc="画像url"></div>

最初css、overflow: hidden; 指定したけどいらんかったですね。
おわり!