質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6274閲覧

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

innjera

総合スコア132

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/06/13 13:24

元画像が正方形でない画像を丸く切り抜きたいのですが、どうやっても歪んでしまいます。基本的にhrml側で処理を行い、cssbackground-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 }

しまう画像
イメージ説明

元画像
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

投稿2017/06/13 13:31

編集2017/06/13 13:37
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2017/06/13 13:47

早速有難う御座います!大変助かりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問