Ugryhacks

画像を丸く切り抜く

正方形の画像をborder-radius:50%で設定すると基本丸くなりますが、縮尺を変えて（拡大して）丸く切り抜くときのCSSです。ポジションや大きさを変えると真ん中よりやや上方を切り抜いたり左上を切り抜いたりできます。
https://ugryhacks.com/note/profile/

.image-frame {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-right: 7px;
  position: relative;
  border: 1px solid #666;
  img {
    width: 100px;
    height: auto;
    z-index: 10000000000;
    position: absolute;
    top: 0;
    left: -25px;
    right: -25px;
    bottom: 0;
    margin: auto;
  }
}

test

2021.7.6 (火)

css scss

Frontend