Pickupニュース

スタイルシートで画像を円形に表示する方法
HTML & CSS

スタイルシートで画像を円形に表示する方法

画像をスタイルシートを使用して、円形に切り抜いて(トリミングして)表示する方法です。

正方形画像の場合

切り抜く対象の画像が正方形であるのが一番容易です。

HTMLマークアップ

<img>に付与したクラスのborder-radius:プロパティを50%に指定します。
HTMLCopy
<img class="image-round1" src="http://placehold.jp/125x125.png" />
ここで使用している画像は、ダミー画像生成サービス:placehold.jpを利用しています。

スタイルシートの設定

CSSCopy
.image-round1{ border-radius: 50%; }

デモ

See the Pen 正方形画像の円形切り抜き by JaSTIN (@JaSTIN) on CodePen.24295


しかし切り抜く対象の画像が長方形の場合、上記の方法では楕円形で切り抜かれてしまいますのでそのままでは使用することが出来ません。

デモ

See the Pen 長方形画像の円形切り抜き error by JaSTIN (@JaSTIN) on CodePen.24295

長方形画像の場合background-image:で設定する方法)

<img>は使用せず、background-image:プロパティに切り抜きたい画像パスを設定したdivボックスを作成します。

HTMLマークアップ

HTMLCopy
<div class="image-round2"></div> <!--横長長方形--> <div class="image-round3"></div> <!--縦長長方形-->

スタイルシートの設定

CSSCopy
/*横長長方形画像*/ .image-round2{ display: inline-block; width: 80px; height: 80px; border-radius: 50%; background-image: url("http://placehold.jp/125x80.png"); /*横長長方形*/ background-position: center; } /*縦長長方形画像*/ .image-round3{ display: inline-block; width: 125px; height: 125px; border-radius: 50%; background-image: url("http://placehold.jp/125x150.png"); /*縦長長方形*/ background-position: center; }

デモ

See the Pen 長方形画像の円形切り抜き by JaSTIN (@JaSTIN) on CodePen.24295


しかしこの方法は<img>を使用することが出来ないので、用途が限られてしまいます。

長方形画像の場合:position:で設定する方法)

<img>タグに親要素となるdivボックスを追加し、position:関係を調整して設定します。

HTMLマークアップ

HTMLCopy
<div class="image-round4"> <img src="http://placehold.jp/125x80.png"> </div> <div class="image-round5"> <img src="http://placehold.jp/125x150.png"> </div>

スタイルシートの設定

CSSCopy
/*横長長方形画像*/ .image-round4{ display: inline-block; width: 80px; height: 80px; position: relative; overflow: hidden; border-radius: 50%; } .image-round4 .img{ position: absolute; left: -100%; right: -100%; margin: auto; } /*縦長長方形画像*/ .image-round5{ display: inline-block; width: 125px; height: 125px; position: relative; overflow: hidden; border-radius: 50%; } .image-round5 .img{ position: absolute; top: -100%; bottom: -100%; margin: auto; }

デモ

See the Pen 長方形画像の円形切り抜き -position by JaSTIN (@JaSTIN) on CodePen.24295

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください