親要素にぴたっと画像が収まるようリサイズjQueryプラグイン|imgLiquid
親要素に指定したサイズに上下左右を拡大縮小・トリミングしていいかんじに収めてくれるプラグイン。
ブログのアイキャッチとかでサイズや比率がバラバラになりそうなときに使うと便利。
参考にさせていただきましたありがとうございます
jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid - かちびと.net
プラグインダウンロード
使い方
まずは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; 指定したけどいらんかったですね。
おわり!