画像アップロード時に設定した、プレビュー画像のサイズが調節できません。

Question

前提・実現したいこと

Ruby on Railsで画像付き記事の投稿アプリを作っています。

現在は、画像を投稿する際のプレビュー画面の実装を行っているのですが、画像のサイズがバラバラになってしまい、希望のサイズになりません。

画像はActive strageで管理していて、プレビュー機能はjavascriptで実装しています。

Active Strageのvariantメソッドを用いてみたり、CSSで調整してみても、プレビュー画像のサイズが全く変わらず困っています。
画像を投稿する際のビューは「article/_form」として切り出し、newとeditのアクションで併用しています。

どなたかご教授頂けると幸いです。
宜しく願い致します。

https://gyazo.com/4628634c7d45dbd9c510422e86ebb36d

該当のソースコード

●_form.html.erb

<%= form_with model:article do |f| %>

  <div class="preview">
    <% article.images.each do |image| %>
      <%= image_tag image.variant(resize: '100x100'), class: 'images' %>
    <% end %>
  </div>
  <div class="form-group"> 
    <%= f.label :images, '画像' %>
    <%= f.file_field :images, name: 'article[images][]', id: "article-image" %>
  </div>

  <div id="image-list"></div>

  <div class="form-group padding-top-15">  
    <%= f.label :title, 'タイトル' %>
    <%= f.text_field :title, class: 'form-control' %>
  </div>
  
  <div class="form-group"> 
    <%= f.label :body, 'コンテンツ' %>
    <%= f.text_area :body, rows: 10, class: 'form-control' %>
  </div>
  <%= f.submit class: 'btn btn-success' %>
<% end %>

●articles.scss

.margin-top-5per{
  margin-top: 5%;
}

.title{
  font-size: 20px;
}

.article-block{
  background-color: white;
  border: 1px solid #bbbbbb
}

.padding-top-15{
  padding-top: 15px;
}

.padding-bottom-15{
  padding-bottom: 15px;
}

a{
  color: #666666;
}

.article-image{
  margin: 0 auto;
  width: 100%;
  height: 350px;
  object-fit: contain;
}

.bottom-article{
  display: flex;
  justify-content: space-between;
}

.button_to{
  margin-bottom: 30px;
  margin-top: -30px;
  margin-left: 10px;
}

.like-group{
  display: flex;
  padding: 5px;
  height: 30px;
}

::before{
  color: #b32f1f;
}

.index-button{
  margin-top: 25px;
  margin-left: -10px;
}

.img{
  width: 100px;
  height: 100px;
}

●preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function() {
    const ImageList = document.getElementById('image-list')

    // 選択した画像を表示する関数
    const createImageHTML = (blob) => {
      // 画像を表示するためのdiv要素を生成
      const imageElement = document.createElement('div')
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

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

      // ファイル選択ボタンを生成
      const inputHTML = document.createElement('input')
      inputHTML.setAttribute('id', `article_image_${imageElementNum}`)
      inputHTML.setAttribute('name', 'article[images][]')
      inputHTML.setAttribute('type', 'file')

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

      inputHTML.addEventListener('change', (e) => {
        file = e.target.files[0];
        blob = window.URL.createObjectURL(file);

        createImageHTML(blob)
      })
    }

    document.getElementById('article-image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)

    });
  });
}

試したこと

1 _form.html.erbに、
 <%= image_tag image.variant(resize: '100x100'), class: 'images'>
の記述（variantメソッドで画像サイズを指定）

2 article.scssに、
.img{
  width: 100px;
  height: 100px;
}
の記述（img 要素にCSSを指定）

Answer 1

ちょっと状況がわかりかねますが
プレビューサイズを調整したいだけならmax-widthとmax-heightを
cssで指示すればいいのでは？
(実際の画像サイズを調整すると負荷が高くなるので)