javascript: input fileでアップした写真をプレビューさせるときに写真が綺麗な丸にならない

Question

実現したいこと

iput fileでアップした写真をプレビューするときに綺麗な丸で写真を表示する方法を知りたい。

困っていること

現状では、inputから写真を選択してプレビューするところまではできているが、表示される際に綺麗な円形にならなくて困っている。

section
  .container.pt-5
    .row
      .col.col-lg-6.offset-lg-3
        .p-3.my-2.bg-white.box-shadow.q_card.q_card_width
          h4.font-weight-bold.gg-txt
            | 写真
          = form_with url: user_path do |f|
            .form-group
              img id="img1" class="default hidden"
              = image_tag("default.png", :alt => "thumbnail", id: 'thumbnail', class: "default")
            .form-group
              label
                .btn.btn-info ＋写真を選択
                = f.file_field :image, style: "display:none;", id: "myfile"

css:
  .default{
    max-height: 240px;
    max-height: 240px;
    border-radius: 50%;
  }
  .hidden {display:none;}

script src="http://code.jquery.com/jquery-3.2.1.min.js"
javascript:
  $(function(){
    $('#myfile').change(function(e){
      //ファイルオブジェクトを取得する
      var file = e.target.files[0];
      var reader = new FileReader();
      //画像でない場合は処理終了
      if(file.type.indexOf("image") < 0){
        alert("画像ファイルを指定してください。");
        return false;
      }
      //delete default image
      let thumbnail = document.getElementById("thumbnail");
      if (thumbnail){
        thumbnail.classList.add("hidden");
      }
      let default_img = document.getElementById("default-image");
      if (default_img){
        default_img.classList.add("hidden");
      }
      document.getElementById("img1").classList.remove("hidden");
      //アップロードした画像を設定する
      reader.onload = (function(file){
        return function(e){
          $("#img1").attr("src", e.target.result);
          $("#img1").attr("title", file.name);
        };
      })(file);
      reader.readAsDataURL(file);
    });
  });

Comments

[m.ts10806]

＞綺麗な円形にならなくて
どうなっているのでしょう。
やりたいことができていないことを書かれてもどうなっているかは何も伝わりませんので、起きている現象を確実に伝えてください

[m.ts10806]

それに「綺麗な」は個人の主観によります。どうなっているのが正解なのかイメージを図示してください。

[nanase21]

>それに「綺麗な」は個人の主観によります。どうなっているのが正解なのかイメージを図示してください。
border-radius: 50%;をイメージしています。
現状では、写真をアップすると写真のサイズによって楕円形になってしまいます。（元から正方形の写真であればborder-radius: 50%;の丸になるのですが、正方形以外だと円の形が崩れてしまいます。

[mari.rinn]

max-height: 240px;　
max-height: 240px;

これのどちらかは　max-width　では？

Answer 1

下記の方法で解決しました。

  .default-image{
    width: 240px;
    height: 240px;
    border-radius: 50%;
  }