JavaScriptで画像プレビュー実装、画像サイズを統一したい【初心者】

画像投稿があるアプリを作成し、プレビューの実装をしたところ、、

画像でかすぎる！！！
、、、となったので自分への備忘録として。

今回のプレビューの実装ではrails、Javascriptを使っています。

document.addEventListener("DOMContentLoaded",function(){
  const ImageList = document.getElementById("image-list");
  if (!ImageList){ return false;}
  document.getElementById("item-image").addEventListener("change", function(e){
   const imageContent = document.querySelector('img');
   if (imageContent){
     imageContent.remove();
   }

   const file = e.target.files[0];
   const blob = window.URL.createObjectURL(file);

   const imageElement =  document.createElement('div');
   const blobImage = document.createElement('img');
   blobImage.setAttribute('src', blob);
  imageElement.appendChild(blobImage);
  ImageList.appendChild(imageElement);
  });
});

該当箇所のrailsはこちら↓

<div class="img-upload">
      <div class="weight-bold-text">
        画像
        <div id="image-list"></div>
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
        <%= f.file_field :image, id:"item-image" %>
      </div>
    </div>

    <%# 以下省略 %>

既に、JavascriptでHTML要素を取得はできているはず、、ということは
①JavaScript内でサイズを指定する
②JavaScript内にクラスを設定し、CSSでサイズ指定をする

この２択かと思い、いろいろ検索、、、すると！
Javascriptでクラスを追加できそうだ。
（↓こちらとっても参考にさせていただきました。ありがとうございました）
https://techacademy.jp/magazine/27026

ということでクラスを追加

document.addEventListener("DOMContentLoaded",function(){
  const ImageList = document.getElementById("image-list");
  if (!ImageList){ return false;}
  document.getElementById("item-image").addEventListener("change", function(e){
   const imageContent = document.querySelector('img');
   if (imageContent){
     imageContent.remove();
   }

   const file = e.target.files[0];
   const blob = window.URL.createObjectURL(file);

   const imageElement =  document.createElement('div');
   const blobImage = document.createElement('img');
   blobImage.setAttribute('src', blob);
  blobImage.classList.add('preview-size');  ←こちらを追加しました
  imageElement.appendChild(blobImage);
  ImageList.appendChild(imageElement);
  });
});

そしてCSSに

.preview-size{
    height: 150px;
    width: auto;
  }

を追加すると、、、

できた!!!

モチベーションを上げるために柴犬を使ってテストをしていましたが、
柴犬のことが嫌いになりそうなぐらいだったので、本当によかった。。。

もっと効率的な方法もありそうなので
引き続き勉強していきます！
間違い等あればコメントいただければと思います