Rails プロフィール画像 大きさ

Question

上記のようにプロフィール画像の大きさが決まったサイズになりません。

https://qiita.com/wann/items/c6d4c3f17b97bb33936f
上記の記事を参考にしましたがエラーが出てしまい、困難中です。

#ビューファイル
  .useriine
    .useriineiine
      .userprofs
        .userprofile
          .user_sub
            .usersubimage
              %p.imageusers
                = image_tag(@user.image_url)
          .user_mains
            .intro
              .ssssssa
                %h1.introuser
                =@user.name
              .metas
                %ul.metalist
                  %li.aaa
                  =@user.tall
                  cm
                  %li.bbb
                  =@user.sex
                  %li.ccc
                  =@user.age
                  歳
                %ul.metalistsss
                  - if current_user == @user
                    = link_to edit_user_registration_path do
                      %i.fa.fa-edit
                  = link_to users_path do
                    %i.fa.fa-users
              .metaprofile
                .missiisis
                  紹介文
                %p.proffff
                  =@user.profile
                %br

#css
.useriine{
  padding: 70px 0 0 0;
    width: 100%;
    position: relative;
    background-color: rgba(var(--b3f, 250, 250, 250), 1);
}
.useriineiine{
  padding: 18px 0 30px 0;
  background: #fff;
    min-height: 210px;
    border-bottom: 1px #ddd solid;
    position: relative;
}
.userprofs{
  width: 1000px;
    margin: 0 auto 0 auto;
    position: relative;
    z-index: 50;
}
.userprofile{
  margin: 22px 0 0 0;
}
.user_sub{
  width: 150px;
  float: left;
  margin: 0 0 0 22px;
}
.usersubimage{
  position: relative;
  width: 150px;
  height: 150px;
}
.imageusers{
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
  img{
    border-radius: 50%;
    border: 1px #ddd solid;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
.user_mains{
  width: 750px;
    float: right;
    padding: 3px 0 0 0;
}
.intro{
  display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.ssssssa{
  font-size: 30px;
}
.introuser{
  font-size: 100px;
    line-height: 1.4;
    color: #333;
}
.metas{
  margin: 1px 0 0 0;
}
.metalist{
    padding: 4px 0 0 0;
    float: left;
    font-size: 14px;
    margin: 0 0 0 8px;
    position: relative;
    display: flex;
    color: blue;
}

.aaa{
  margin-left:10px;
  
}
.bbb{
margin-left: 30px;

}
.ccc{
  margin-left: 30px;
  
}
.metalistsss a{
    margin: 0 30px 0 60px;
    position: relative;
    color: blue;
}
.metaprofile{
  font-size: 15px;
    margin: 120px 0 0 0;
}
.missiisis{
  font-size: 30px;
}
.proffff{
  height: 100px;
  margin-top: 20px;
}
                
  image_upload.rbには今のところ何も記載はしていません。

  

以上からアドバイス、回答をお願いいたします

Answer 1

縦横比が1:1でない画像のとき
「プロフィール画像の大きさが決まったサイズになりません。」という状態になると思います。

width: 150px;とheight: 150px;を指定している要素に対して必要な記述が
imgタグにされてしまっていることが原因です。
例えば以下のようにすると実装できると思います。

.usersubimage {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%; /* 追加 */
  overflow: hidden; /* 追加 */
  border: 1px #ddd solid; /* 追加 */
  box-shadow: 0 0 0 10px red; /* わかりやすさのために追加。確認後削除してください。 */
}
.imageusers {
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
  width: 100%; /* 追加 */
  height: 100%; /* 追加 */
  display: flex; /* 追加 */

  img {
    /*
    border-radius: 50%;
    border: 1px #ddd solid;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    */
    min-width: 100%; /* 追加 */
    min-height: 100%; /* 追加 */
    object-fit: cover; /* 追加 */
    display: block; /* 追加 */
  }
}

なお、object-fitはIE11には対応していないようなので、IE11に対応する必要があるのであれば別の方法で親要素にフィットするように検討してください。
https://caniuse.com/#search=object-fit

---

あと、本件とは関係ないですがfloatを使用して左右に要素を並べる場合、
その親要素には以下のような記述が必要です。

.userprofile::after {
  content: "";
  display: block;
  clear: both;
}

参考:
https://web-camp.io/magazine/archives/27842

Comments

[退会済みユーザー]

ありがとうございます。無事解決しました。今後の参考にもさせていただきます。