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

HP制作 WEBサイト

css_thumb_radius

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

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

<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;
}

css_radius_sample01

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

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

css_radius_sample02

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

HP制作 WEBサイト

関連記事