CSSで長方形の画像を円で切り抜く

デモ

画像を円に切り抜く

画像が正方形の場合

img{
	border-radius:50%;
}

素直にborder-radiusで画像の50%の大きさをしてすればいい。

img{
	width:100px;
	height:100px;
	border-radius:300px;
}

pxで指定するのなら、幅よりも大きめの値を設定すればいい。

・参考
border-radius－CSS3リファレンス

画像が長方形の場合

<img src="http://jsrun.it/assets/x/y/1/B/xy1Bw.jpeg" class="sample" >

この画像の大きさは「360×270」だ。

.sample{
    border-radius:50%;
}

正方形のときと同じように、border-radiusを指定すると楕円形になってしまう。

background-imageを使う

<div id="bg"></div>

#bg{
    width:270px;
    height:270px;
    border-radius:500px;
    background:url("http://jsrun.it/assets/x/y/1/B/xy1Bw.jpeg");
}

長方形の短い方と同じ長さの正方形divを作る。それの背景に画像を設定して、border-radiusを設定すればいい。
しかしこの場合だと画像のくり抜きが左上端からなので、画像がずれている。

background-positionで真ん中に調整する

#bg-position{
    width:270px;
    height:270px;
    border-radius:500px;
    background-repeat: no-repeat;
    background:url("http://jsrun.it/assets/x/y/1/B/xy1Bw.jpeg");
    background-position: center;
}

background-positionの「center」を使えば、背景画像を真ん中で切り抜くことができる。

注意:background-positionはurlで背景を設定してから記述しないと、動作しない。

アマゾンの画像リンクを丸く切り抜けないか

このブログのデザインを少し変更したいと思い、cssをいじっていた。Amazonの書籍とか映画のリンクをよく貼るので、そこのデザインを変えれないかと考えた。そこで画像を丸く切ってオッシャレーにしたいと思った。

Mediumというサイトでは、丸く切ってオッシャレーにしている。
Medium – Where good ideas find you.

ブログデザインのcssを追加する

Firebugで画像のclass名を調べてそこをいじる。

.hatena-asin-detail-image{
    border-radius:50%;
}

しかしこれでは画像が長方形なので、楕円形になってしまう。

背景画像にしたいが、divを新しく生成する必要があるので、cssのみの追記では難しい。Chrome拡張で追記する方法もあるが、そこまでしたくないなあ。

どうやればいいのだろうか。