border-radius: 50%にしたのに長方形画像だと楕円形になってしまう

#分からないこと
オリジナルアプリで投稿したら投稿者の画像が表示できるようにしました。
通常の画像であれば下記の記述で円形になるのですが、長方形になると楕円形になってしまいます。
どんな画像でも円形になるようにするにはどのように記述すればよいかご教授いただけないでしょうか。
よろしくお願いします。

#現在の記述

erb
1<div class="review_user__img">
2  <%if review.user.avatar.attached?%>
3    <%=link_to (image_tag review.user.avatar, class: "user-img"), "#"%>
4  <%else%>
5    <%=link_to (image_tag 'default-icon.png' , class: "user-img"), "#"%>
6  <%end%>
7 </div>

.user-img {
  border-radius: 50%;
  width:  50px;
  height: 50px;
  margin: auto 10px;
}

#参考にした記述
https://teratail.com/questions/54204?link=qa_related_pc）

よろしくお願い致します。

maisumakun

2021/07/19 02:14

当該の画像をブラウザから「要素の検証」で確認してみてください。幅や高さで上に書いた「以外の」CSSが効いていたりはしませんか？

taku_ynwa

2021/07/19 02:20

コメントありがとうありがとうございます！ `box-sizing: border-box;`が効いておりました。その他は特にありませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

多少画像の表示が削れるかもしれませんがobject-fit: cover;を使うのはいかがでしょう。
縦長表示よりはましなはずです。

HTML
1<div class="box">
2  <img src="https://placehold.jp/150x300.png" class="img">
3</div>

CSS
1.box {
2  width: 100px;
3  height: 100px;
4  border-radius: 50%;
5  position: relative;
6  overflow: hidden;
7}
8
9.img {
10  position: absolute;
11  width: 100%;
12  height: 100%;
13  object-fit: cover;
14}