親要素の大きさに合わせて画像をリサイズ「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
関連記事
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
Comment
[…] するならobject-fit:coverで一発ですし (でも未だにsnowleopardしか支給されてない人だっているんです私みたいに。) おなじjQuery使うにしても「imgLiquid」とかの方が断然便利なんですけどね。 […]
今日色々なJS試してこれに落ち着く。ハマッたのでメモ。 → 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 https://t.co/uvza3yB9Ps
#tech
jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 | Think deeply, Do less, More effective.. http://t.co/7MrVqfZMmf
jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」
imagefill.jsよりいいです!
jQuery | 親要素の大きさに合わせて画像をリサイズ「imgLiquid」 | Think deeply, Do less, More effective http://htn.to/ncHyW4
親要素の大きさに合わせて画像をリサイズ「imgLiquid」 kwski.net/jquery/1077/ @kwski3さんから