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

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

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

: 入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。ダウンロードスクリプト実装 v

: タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。デフォルトでは、768

: マウスオーバーでキャプション表示してくれるプラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

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

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

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

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。目次実装方法モダール形式 Datepicker

: 定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

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

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

: 様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

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

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれる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さんから

返信