親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。
ダウンロードはこちら

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="imgLiquid-min.js" type="text/javascript">

実装

<!-- thumbnail( 300x200 ) -->
<div class="div1077" style="width:300px; height:200px;"><img src="画像"></div>
<!-- thumbnail( 150x100 ) -->
<div class="div1077" style="width:150px; height:100px;"><img src="画像"></div>

<script type="text/javascript">
$(document).ready(function() {
    $(".div1077").imgLiquid();
});
</script>

デモ

オプション

<script type="text/javascript">
$(document).ready(function() {
    $(".div1077").imgLiquid({
        fill: false  // アスペクト(縦横)比を維持させる
    });
});
</script>

その他オプション

その他プラグイン
ImgCenter

: 「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

: Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。ダウンロード *黄色ボタン

: シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなことスワイプキャプション

: 数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモスクリプト実装既存のテキストボックスにclas

: リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。ダウンロードはこちらリストだけでなくテーブルにも実装可能のようです。スクリプト

: 入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。実装 fu

: カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。ダウンロードスクリプト

: ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。サムネ

: テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

: ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモスクリプ

Comment

jQueryでサムネイル画像をセンタリング+トリミング。 | ミリオンハイスクール | ネットビジネス | WordPress より:

2016年5月28日 8:02 PM

[…] するならobject-fit:coverで一発ですし（でも未だにsnowleopardしか支給されてない人だっているんです私みたいに。）おなじjQuery使うにしても「imgLiquid」とかの方が断然便利なんですけどね。 […]

返信
@LesArbresVerts より:

2015年10月28日 6:35 PM

今日色々なJS試してこれに落ち着く。ハマッたのでメモ。　→　親要素の大きさに合わせて画像をリサイズ「imgLiquid」 https://t.co/uvza3yB9Ps

返信
TechFeeds (@JapanTechFeeds) より:

2015年1月3日 10:00 AM

#tech
jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 | Think deeply, Do less, More effective.. http://t.co/7MrVqfZMmf

返信
nilab より:

2015年1月3日 8:55 AM

jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」
stk2k より:

2013年11月28日 3:16 PM

imagefill.jsよりいいです！
@yoshi_nii より:

2013年11月1日 4:48 PM

jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 | Think deeply, Do less, More effective http://htn.to/ncHyW4

返信
@sin_niida より:

2013年7月22日 12:52 AM

親要素の大きさに合わせて画像をリサイズ「imgLiquid」 kwski.net/jquery/1077/ @kwski3さんから

返信