Web制作メモ -トップへ-

[jQuery] width()とheight()で画像のサイズを変更する

JavaScript2015.03.11 14:56

jQueryで画像のサイズを変更するには、width()height()を使います。

width()とheight()は、引数なしで使用すると横幅と高さを取得し、引数を指定して実行すると横幅と高さを変更します。

width()とheight()

width() … 横幅を取得
height() … 高さを取得
width(200) … 横幅を200pxに変更
height(150) … 高さを150pxに変更

下記のコードでは、画像の横幅と高さを取得し、その値を使って縦横比そのままで横幅200pxに縮小しています。

画像を横幅200pxに縮小

function Resize(){
    var img = $("#preview > img"); //画像を取得
    var w = img.width();
    var h = img.height();
    img.width(w/(w/200)); //横幅を縮小
    img.height(h/(w/200)); //横幅の縮小率を使って高さを縮小
}

画像のサイズを変更すると言っても、実際に画像がリサイズされるわけではなく、対象のimg要素のstyle属性にwidthとheightが設定されるだけです。

width()とheight()で大きさを指定したimg要素をGoogleデベロッパーツールで表示してみます。

widthとheightの結果

「style="width: 200px; height: 150px;"」の部分がwidth()とheight()によって設定されたコードです。

サンプル