プレビュー機能の画像縮小したい

Question

画像投稿のさいプレビュー機能を付けたのですが
表示される画像のサイズが大きいです。調節するにはどういうコードを書けば良いでしょうか。。

仮説：divにクラスをつけてCSSで幅を調整したのですが変化なしでした。。。

 <div class="img-upload">
          <div class="weight-bold-text">
            添付資料
          </div>
          <div class="click-upload">
            <%= f.file_field :image, id:"item-image" %>
          </div>
          <div class="image-list" id="image-list">
          </div>
           

```javascript

document.addEventListener('DOMContentLoaded', function(){
const ImageList = document.getElementById('image-list')
document.getElementById('item-image').addEventListener('change', function(e){
const file = e.target.files[0];
const blob = window.URL.createObjectURL(file);
// 画像を表示するためのdiv要素を生成
const imageElement = document.createElement('div');

// 表示する画像を生成
const blobImage = document.createElement('img');
blobImage.setAttribute('src', blob);

// 生成したHTMLの要素をブラウザに表示させる
imageElement.appendChild(blobImage);
ImageList.appendChild(imageElement);
})
});

Answer 1

ありがとうございます！！！直りました

Comments

[kei344]

回答を元に解決したのであれば「ベストアンサー」を選ぶほうが良いと思います。

Answer 2

imgタグは、幅指定しないと、親のdivタグの幅を突き抜けてしまいます。
親のdivタグの幅に合わせたい場合は、次のようにするとよいです。

img{
  width:100%;
}

あるいは

img{
  max-width:100%;
}

高さが崩れる場合は、heigt追加するとよいです。

img{
  max-width:100%;
  height:auto;
}

Comments

[ikikikoko]

eternalbeginneさんをベストアンサーしたと思ったら押すところ間違っていました、申し訳ないです