Bootstrapで画像を丸く表示するrounded-circleの使い方

記事内に広告が含まれています。

Bootstrapで画像を丸く表示する

Bootstrapで画像を丸く表示するにはrounded-circleを使います。


Bootstrap4では四角い画像を簡単に丸い形で表示することができます。

四角い画像を丸く表示する「rounded-circle」

通常、画像をWordPressで表示すると
電脳空間の世界を飛び回る女性
のように四角く表示されますが、Bootstrap4では画像を編集することなく、簡単に丸く切り取ったような形で表示できます。

imgタグにrounded-circleクラスを指定するだけで簡単に
電脳空間の世界を飛び回る女性
丸く切り取ったような形になります。

実際のソースは以下のようになります。

<img src="画像のURL" class="rounded-circle">

Bootstrap3までは「img-circle」で行けたようですがBootstrap4では「img-circle」は「Not Work」になっているので「rounded-circle」を使う必要があります。

まとめ

Bootstrap4では「rounded-circle」を使えば簡単に四角い画像を丸く切り取って表示することができます。

以上、「Bootstrapで画像を丸く表示するrounded-circleの使い方」でした。

タイトルとURLをコピーしました