プレビューされる画像をリサイズされた画像にしたい

Question

現在ポートフォリオ作成中の者です。
ポートフォリオには画像投稿機能があり、mini_magickで画像を600px ×　400pxにリサイズして保存する仕組みとなっております。
画像選択時には画像プレビュー機能により、選択した画像が表示されるのですが、元の画像のサイズで表示されます。
このプレビュー画像をレスポンシブに対応した横:縦=3:2でリサイズされた画像が表示されるようにしたいです。
cssでobject-fit: cover;を適用させてみたりしたものの、レスポンシブ対応でなくなってしまうなど、うまくいきません。まだ学習歴が浅いため、言葉足らずかもしれませんが、どなたかご教授いただけると幸いです。

uploaders/image_uploader.rb

 process resize_to_fill: [600, 400, "Center"]

posts/new.html.erb

<div class="col-lg-9 d-flex flex-column px-0">
              <!--ユーザーが画像をアップロードした場合は画像をプレビュー表示-->
              <% if @post.image.present? %>
                <div class="img-box">
                  <%= image_tag @post.image.url, id: "post-image-preview", class: "img" %>
                </div>
                <%= f.hidden_field :image_cache %>
              <!--アップロードしていない状態は何も表示しない-->
              <% else %>
                <img src="", id="post-image-preview" class="">
              <% end %>
              <div class="d-flex flex-column">
                  <%= f.label "画像を選択", for: "post_image", class: "btn btn-warning w-100 text-center mt-3 #{"is-invalid" if @post.errors.messages[:image].any? }" %>
                  <%= f.file_field :image, { onChange: "javascript: handleImage(this.files);", style: "position: relative; bottom: 34px; opacity: 0;", required: "", class: "w-25" } %>
　　　　　　　　・
　　　　　　　　・
　　　　　　　　・

<%= javascript_include_tag "posts/new" %>

javascripts/new.js

// 画像プレビュー
function handleImage(image) {
    let reader = new FileReader();
    reader.onload = function() {
        let imagePreview = document.getElementById("post-image-preview");
        imagePreview.src = reader.result;
        imagePreview.className += "img";
    };
    reader.readAsDataURL(image[0]);
}

scss

.img {
    width: 600px;
    height: 400px;
    object-fit: cover;
{

Answer 1

失礼しました解決しました