Photoshopなどで画像加工せずにCSSだけで画像を丸く切り抜きます。
いちいちトリミングなんて面倒ですからね！
CSSで正方形の画像を丸く切り抜く
まずはこちらの正方形の画像から。
See the Pen eYZzYQg by sukimadou (@sukimadou) on CodePen.
widthとheightの値（上のコードだと180pxの部分）は制作するサイトに合わせて好きな大きさにしてください。
CSSで長方形の画像を丸く切り抜く
お次は長方形の画像を丸く切り抜きます。
See the Pen vYGKYQV by sukimadou (@sukimadou) on CodePen.
元画像が長方形の場合は最後に1行足すだけ！
【CSS】object-fitとは
長方形の画像を丸くする際に１行足したobject-fitとは指定された形（枠）に対して画像をどのように適応させるかを指示するプロパティーです。
ここでは代表的な２つの値を紹介。
object-fit: cover;
画像の縦横比を保ったまま表示領域をカバーする（覆う）
object-fit: contain;
画像の縦横比を保ったまま全体を表示領域におさめる
画像で分かりづらい場合は一度同じ条件で試してみてください。こういうことね！と納得できると思います。
画像を丸く切り抜く位置を指定したい
使用する画像によっては画像のセンターではなく、右側を切り取りたいなどの必要が出てくると思います。
そんなときはこちら。
See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.
object-positionで横、縦の位置を指定できます。％やpxで具体的な位置を指示することも可能。
上記の場合は画像の左上を指定しています。
object-fitとobject-positionはIE非対応
WEB制作においての憎き存在（）Internet Explorer通称IE。
ここまでご紹介したobject-fitとobject-positionはなんと非対応。
使用するサイトにもよりますが、IEユーザーが多いサイトは要注意です。
【JS】object-fit-imagesでIEに対応させよう
object-fitとobject-positionをIEにも対応させるために以下のJavaScriptを追加していきます。（今回はCDNを利用します）
<!--objedt-fit（IE対策）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>上記コードをHTMLファイルの</body>の直前に記述します。
もしくはJSファイルを作成し、上記コードを記入してからリンクさせてください。
CSSで長方形の画像を背景画像にして丸く切り抜く
長方形の画像を丸く切り抜く方法としてもうひとつ、背景画像に指定する方法があります。
See the Pen LYNZEpJ by sukimadou (@sukimadou) on CodePen.
背景画像に指定する場合はhtmlに適当な要素（この場合div）を作り背景画像を表示させます。
background-size: cover;で先ほどのobject-fitのように画像の縦横比を保ってトリミング。
background-sizeの値はobject-fitの値と同じ解釈でOKです。
【おまけ】CSSで画像を八角形に切り抜く
QiitaにてCSSだけで画像を八角形に切り抜く投稿がありましたのでシェアしますね。
とてもきれいな八角形です。レッツチャレンジ！
