アイコンのような画像を表示させたいときがあります。
きれいな正円の中に画像が配置されているやつですね。
いちいち元画像から上記のような画像に加工するのは面倒ですよね。
画像データが増えるのも良くないかもしれません。
そんな時は下のような普通の画像を元にCSSを使ってアイコン画像を作ってみましょう。
1. 未加工の画像から丸いアイコンを作る（HTML）
まずはHTMLです。
|
1 2 3 |
<div class="trim"> <img src="https://goo.gl/L5naxw"> </div> |
画像をdivで囲みます。
divには「trim」というクラスを設定しておきましょう。
2. 未加工の画像から丸いアイコンを作る（CSS）
CSSは少し多めですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.trim { position:relative; overflow: hidden; width:300px; height:300px; border-radius:50%; } .trim img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); height:100%; } |
「trim」クラスで正円を作り、その中に画像を配置するようなイメージです。
「trim」クラスのポイントは「3行目、6行目」でしょうか。
「border-radius:50%」でdivは正円になりますが、このまま上に画像を配置すると、せっかくの正円が潰れてしまいます。
それを回避するために「overflow:hidden」を設定しています。
こうすることで、正円からはみ出した部分を非表示にしてくれます。
「img」では画像が正円の中心に画像の中心が来るようにしています。
これさえ設定しておけば、divの大きさが変えても大丈夫ですね。
CSSハックも念のために書いています。
See the Pen CSS 未加工の画像から丸いアイコンを作るCSS（普通の画像だけでOK） by clue-design (@clue-design) on CodePen.0
大きな画面でみたい場合はこちらから。
