• かちびと.net

    コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquidのご紹介。グリッドレイアウトなんかと相性良さそうです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid

スポンサーリンク

画像を包括したコンテナに
その画像がぴったり収まる
ようにサイズを調整する、
というjQueryプラグイン。
必要になるか分かりません
が、需要はありそう。

コンテナ一杯に画像を表示させる、というもの。

imgLiquid


上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src ="imgLiquid-min.js" type="text/javascript"></script>

コアとプラグインを読み込みます。

$(".imgLiquid").imgLiquid();

初期化する。

※background-sizeは使用されてないです。

他にも結構な数のオプションが用意されています。一応覚えておこうと思います。

imgLiquid

URL :
TRB :

Ads

Posts

Contact

Services