imgタグ内の画像をアスペクト比を保ちながら表示するjQueryプラグイン

　 画像をHTMLページ内に表示する場合、表示したいエリアより画像サイズが大きい場合や、縦横比（アスペクト比）がボックスと一致しないために画像が伸縮されて表示されたりしてしまい、残念です。

　「imgLiquid」というプラグインを使うと、ボックス内に画像をリサイズして表示してくれるので便利です。使い方も非常に簡単なのでご紹介します。
（こちらの記事に既に紹介がされていますが、この記事では少しオプションの説明も加えておきます。

入手方法

使い方

jQueryとimgLiquid.jsを読み込む

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/imgLiquid-min.js"></script>

imgタグを内包する要素に対してidを振る

<div id="img-container" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>

imgタグを内包する要素に対しimgLiquidを実行

<script>
$('#img-container').imgLiquid();
</script>

オプションについて

オプションなし

<script>
$('#img-container').imgLiquid();
</script>

アスペクト比を維持

<script>
$('#img-container').imgLiquid({ fill: false });
</script>

画像の垂直位置を指定

verticalAlignで指定します。center/top/bottomなど。

<script>
$('#img-container').imgLiquid({ verticalAlign: 'top' });
</script>

水平位置を指定

horizontalAlignで指定します。center/left/rightなど。

<script>
$('#img-container').imgLiquid({ fill: false, horizontalAlign: 'right' });
</script>

HTML5の独自データ属性でオプションを指定することもできる

以下の属性が指定可能

• data-imgLiquid-fill
• data-imgLiquid-verticalAlign
• data-imgLiquid-horizontalAlign

<div id="img-container" data-imgLiquid-fill="false" data-imgLiquid-horizontalAlign="left" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>
<script>
$('#img-container').imgLiquid();
</script>