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

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

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

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

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

: ポップアップ・モーダルウィンドウプラグイン

ポップアップシンプルにポップアップを実装できる「PopBox」実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

: 数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

: 開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。ダウンロードはこち

: 日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。目次 Datepicker for Boot

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

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

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

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

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

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

: [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。ダウンロードはこちらデモスクリプト

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

返信