親要素の大きさに合わせて画像をリサイズ「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

: テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

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

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

: レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。ダウンロードスクリプト実装 $(document).ready

: 時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

: select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

: わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。ダウンロード画像とし

: スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。シンプルでカスタマイズ豊富なスライダー用プラグイン「b

: Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

: グラフ作成プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

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さんから

返信