【CSS】サムネイルなどで使える！画像を丸く表示させる方法

サムネイルなどで使える丸い画像をわざわざ作成する手間を省く便利なコードを紹介します。

画像や要素を丸く表示させる

<div class="thumb">
	<img src="image.jpg" />
</div>

.thumb {
	width: 100px;
	height: 100px;
	border-radius: 100%;
	overflow: hidden;
}
img {
	height: 100%;
	width: auto;
	vertical-align: middle;
}

border-radius に100%で要素を丸く表示することができます。

.thumb {
	width: 100px;
	height: 100px;
	border-radius: 10%;
	overflow: hidden;
}
img {
	height: 100%;
	width: auto;
	vertical-align: middle;
}

それより小さい値を入れれば角丸型も作れます。