JavaScript（jQuery）で画像をリサイズする方法(JS以外でも可)

#画像をリサイズするJS以外でも使用可

画像をクリックしたら画像の縦横比を維持した状態で指定のサイズに画像をリサイズする

$('img')on.('click', function(){
  //画像のsrcを取得
  let src = $(this).attr('src');

  let width = 400;//任意の数値
  let height = 400;//任意の数値

  //元の画像サイズ
  let originalWidth = $(this).width();
  let originalHeight = $(this).height();

  //割合計算(小数点が出る場合はコンソールで注意が出る場合も。その場合はMath.ceil()などを使用して切り上げる)
  let rate = originalWidth / originalHeight;
  height = (width / rate);
  if(rate < 1){
    height = width;
    width = width * rate;
  }
  //リサイズした画像をwidth、heightともに追加
  $('body').append(`<div><img src="${src}" width="${width}" height="${height}"></div>`);
  
});