画像を丸く円形にくり抜いて表示するCSS - スタイルシートTipsふぁくとりー

《2017年7月3日 20:00 公開/更新》 画像を丸く円形にくり抜いて表示するCSS [イメージ] スタイルシート(CSS)を使って、四角い画像を丸く表示させる書き方を紹介。わざわざ画像を直接加工しなくても、CSSを使うだけで丸く(円形に)表示できます。画像を丸くカットするだけでなく、画像の周囲に丸い枠線を加えて縁取りして表示することもできます。 画像を直接加工することなくCSSで丸く円形にくり抜いて表示したい 四角い画像をスタイルシートで丸く円形に表示させる方法2通り 1. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を崩しても構わない場合) 2. 四角い画像を丸く円形にくり抜いて表示する方法(画像の縦横比を維持したい場合) 2B. 縦横比を維持したまま円形で表示した上で、枠線を付加したい場合 画像を直接加工することなくCSSで丸く円形にくり抜いて表示したい 四角い画像

[perry-tips]

“center center;”

[Cherenkov]

長方形 正方形 丸く切り抜く 切り抜き 円形

[hujuu]

“img { border-radius: 50%; /* 角丸半径を50%にする(=円形にする) */ width: 180px; /* ※縦横を同値に */ height: 180px; /* ※縦横を同値に */}”