画像を円形表示する方法

2379 ワード
HTML5 CSS3 HTML5 テキストリンク

手順

①HTMLを記述する


②CSSを記述する


③プレビューで表示を確認する

CSSの記述をする

copy_practice.css
/*main_picture(親要素)のデザイン*/

.main_picture {

  width: 100px;
  height: 100px

}

/*mainのロゴ写真の円形の表示(子要素の設定)*/

.main_picture img {

  width: 100px;
  height: 100px;
  border-radius: 100px;

}

ポイント!
①画像を円形にして縦横比を維持したい場合は親要素のwidthとheightと子要素のwidthとheightには同値を指定する必要があります。
②border-radiusプロパティではwidthとheightの値と同値を指定します。

HTMLの記述を行う

copy_practice.html

<div class="main_picture">
  <img src="flower_picture.jpg" alt="花畑の風景">
</div>

完成図

下記のような画像の状態になります。

参考サイト

以下のサイトを参考にさせて頂きました。

・CSSで画像を切り抜く方法

・画像を丸く円形にくり抜いて表示するCSS