画像を正方形などの指定サイズにリサイズして表示する

プラグイン「imgLiquid」を使う。縮小しながらのリサイズや縦横比保持なども出来る。
元の画像はそのままで、リサイズ後の画像を新たに作っている訳ではないので、DBも軽くて便利。

１．以下からimgLiquidをダウンロード
https://github.com/karacas/imgLiquid
２．jsフォルダの中にある「imgLiquid-min.js」をWEBサイトのフォルダへ移動
３．html内にscriptタグで読み込む

<script src="js/imgLiquid-min.js"></script>

４．下記jsをそのまま書く

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

５．htmlを書く
divで囲むこと。divにはclass「imgLiquidFill」をつける。
そのdivにwidthとheightを指定した値でリサイズされる。

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody.jpg" />
</div>

Web Tips Plus