どうも7noteです。四角の写真をCSSで丸く切り抜く方法。

四角形の写真（長方形でも可）を任意の位置を中心に切り抜く方法です。

フォトショップなどを使わずにCSSで丸く切り抜いていきます。

切り抜く前の画像

切り抜いた画像

↓は右下にフォーカスしたもの

書き方

<figure>
  <img src="sample.jpg">
</figure>

figure {
  width: 100px;       /* 切り抜きたい大きさを指定 */
  height: 100px;      /* 切り抜きたい大きさを指定 */
  border-radius: 50%; /* 形を円形にする */
  overflow: hidden;   /* はみ出した部分は非表示 */
  position: relative; /* 基準値とする */
}

img {
  width: inherit;     /* 親要素に合わせる（自由に調整可） */
  height: inherit;    /* 親要素に合わせる（自由に調整可） */
  position: absolute; /* 相対位置に指定 */
  top: 0;             /* 好きな位置を指定 */
  left: 0;            /* 好きな位置を指定 */
}

解説

例では正方形の画像を使用していますが、長方形の画像でも切り抜き可能です。

仕組みはいたってシンプルで、親要素にあたるfigureからはみ出した部分はoverflow: hidden;で表示しないようにしています。
位置ですが、正方形であれば上のサンプルソースの通り書くと縦横を合わせて中央で切り抜かれます。

切り抜きたいサイズより大きな画像を用意すれば、img要素のwidthとheightの指定はナシで、topやleftの数値を調整することで好きな位置で画像を切り抜くことができます。

もし画像が切り抜きたい大きさよりも小さい場合は、object-fit: cover;を併用することで自動的に縦横比をキープしたまま、画像を拡大表示して任意の場所で切り抜きができます。

まとめ

予め切り抜いた画像を使う方がよいのですが、CSSで切り抜きが必要な場合でもこの方法が使えます。
親要素を星形に作ることができれば、星形に画像を切り抜いたりできるかもですね。

おそまつ！