CSSを使って画像を丸く表示する方法

2018年12月19日HTML・CSS

左の画像は四角い画像をCSSを使って丸く表示させています。

 
今回はCSSを使って画像をこんな風に丸く表示する方法をご紹介します。

 

 

画像を丸く表示

 

画像が正方形の場合

画像が正方形なら画像を丸く表示させるのは簡単です。

<img>に『border-radius:50%;』を追加します。

HTML

CSS

border-radiusはボックスの角を丸くするものです。
『border-radius:50%;』と指定することで画像を丸く表示することができます。

『width(横幅)』と『height(縦幅)』は同じ大きさにしてください。同じにしないと丸になりません。

 

スポンサーリンク

 

画像が長方形の場合

画像が長方形の場合、上のやり方だと縦横比が崩れてしまいます。

 

  ➡︎   

 
横長の画像を上記のやり方で丸く表示すると、画像が横に潰れてしまいます。
縦長の画像は上下に潰れてしまうのです。

これはwidthとheightで同じ値を指定し長方形の画像を無理やり正方形にしているためです。

 

きらり
widthとheightを長方形のままにするとどうなるんだろう?

 

 
画像の横幅と縦幅を変えずにborder-radius:50%;と指定すると、横長の画像は上記のような楕円形になります。
縦長の場合は縦の楕円形になってしまうという訳です。

では次で長方形の画像を縦横比を崩さず丸く表示する方ほを紹介します。

 

長方形の画像を縦横比を崩さず丸く表示する方法

HTML
※pではなくdivでもOKです。

CSS

 
表示する画像を背景として設定することによって縦横比を維持したまま表示させることができます。

 

 

カスタマイズ

カスタマイズという程ではありませんが角丸に表示したり枠線をつけたりすることができるのでご紹介します。

 

border-radiusの値を変更

上ではborder-radius:50%;と指定して丸く表示させています。
このborder-radiusの値を変えると四角い画像の角を丸くすることができます。

指定方法
    border-radius: 値 ;

  • 値1つ・・・・上下左右
  • 値2つ・・・上下 左右
  • 値3つ・・・・上 左右 下
  • 値4つ・・・上 右 下 左

 

枠線を付ける

画像に枠線を付けることができます。

CSSに以下を追加してください。

指定方法
    《指定例》 border:2px solid gray;

  • border: 枠線の太さ 線の種類 色;

 

 

最後に

四角と丸とでは画像の印象も変わります。

角張った四角より丸みをつけた方が柔らかく感じるのではないでしょうか。
ただし、表示させる画像によっては丸くすると見づらくなる場合もあります。

border-radiusは画像だけではなく、divなどのボックスでも使えま強。

四角と丸を使い分けて記事を飾ってみてください。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら

 

この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。