Webサービスを作っていると
画像を丸く切り抜きたい時がある。
正方形の画像であれば"Border-radius:50%"で簡単に
丸く出来るのだが長方形の画像で上記のCSSを適用すると楕円形の
画像になってしまう。。。
正方形でない画像も真円で切り抜く方法はこちらのサイトに
詳しく書かれていた。
https://www.nishishi.com/css/trim-image-to-circle.html
ちなみにBackground-imageが表示されない時は
その要素にwidthとheightを指定してあげれば良い。
また、画像の中央で円形にくり抜きたい時は
background-position: center ;
とすれば中央でくり抜ける。
また、styleで
background-size:cover;
を指定してあげれば
以下の写真のように写真が拡大・縮小されて領域内に全体が収まるように処理される。
↓
