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

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

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

: 「jqPlot」カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。以下4つのファイルへリンクし

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

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

: グリッドレイアウトプラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

: バリデーションプラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

: ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

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

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

: 画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな～と思い試してみました。ナビゲーション内にサムネイルを

: 実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

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

「jsTree」は、Webサイト上にツリー構造を表示してくれる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さんから

返信