CSS 元画像が長方形の画像を歪みなく丸く切り抜く方法

元画像が正方形でない画像を丸く切り抜きたいのですが、どうやっても歪んでしまいます。基本的にhrml側で処理を行い、cssのbackground-image:image-urlは使わずに処理したいのですが、可能でしょうか。

理由としては、プロフィールの画像を想定している為、CSS側で処理すると対象者が変わるたびに画像を変更することができない為です。

html
1<div class="icon-top"><img src="/uploads/user/user_icon/4/user4.jpg" alt="User4" /></div>

css
1icon-top img{
2  width: 1.5rem;
3  height: 1.5rem;
4  border-radius: 50%;
5    -moz-border-radius: 50%;
6    -webkit-border-radius: 50%;
7 }

しまう画像

元画像

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

回答1件

ベストアンサー

notIEなら。

CSS
1.icon-top img{
2  width: 5rem;
3  height: 5rem;
4  border-radius: 50%;
5    -moz-border-radius: 50%;
6    -webkit-border-radius: 50%;
7	object-fit: cover; /* ADD */
8}
9```**動くサンプル：**[https://jsfiddle.net/tykuLoo9/](https://jsfiddle.net/tykuLoo9/)
10
11---
12
13IE9+
14
15```CSS
16.icon-top {
17	width: 10rem;
18	height: 10rem;
19	border-radius: 50%;
20	overflow: hidden;
21	position: relative;
22}
23.icon-top img {
24	min-width: 100%;
25	min-height: 100%;
26	position: absolute;
27	left: 50%;
28	top: 50%;
29	-webkit-transform: translate(-50%, -50%);
30	-ms-transform: translate(-50%, -50%);
31	transform: translate(-50%, -50%);
32}
33```**動くサンプル：**[https://jsfiddle.net/tykuLoo9/1/](https://jsfiddle.net/tykuLoo9/1/)
34
35
36---
37
38【object-fit - CSS | MDN】
39[https://developer.mozilla.org/ja/docs/Web/CSS/object-fit](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)
40
41【【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 - ONZE】
42[http://on-ze.com/archives/2296](http://on-ze.com/archives/2296)
43