CSS에서 직사각형 이미지의 가운데를 둥글게 자르고 표시

소개

CSS에서 이미지의 중앙을 둥글게 자르고 표시하는 방법을 요약합니다.
정사각형이 아닌 이미지로도 대응할 수 있도록 했습니다.

자신의 메모입니다.

방법

이 이미지의 중앙을 둥글게 잘라서 표시하고 싶습니다.

1. 이미지를 보려는 곳에 빈 div 요소 작성

index.html

<div class="circle-img daiginjo"></div>

둥근 잘라내기 위한 클래스명 circle-img 와, 이 이미지를 나타내는 클래스명 daiginjo 를 붙여 둡니다.

2. 중앙을 둥글게 자르기 위한 CSS 작성

styles.css

.circle-img {
  width: 100px;
  height: 100px; /*widthとheightは同じ値にする*/
  border-radius: 50%;
  background-size: cover; /*画像をいい感じの大きさに調整*/
  background-position: center center; /*画像をタテヨコ両方向に中央寄せ*/
}

width 와 height 는 원하는 값이어야 합니다.

3. 이미지를 배경 이미지로 설정

styles.css

.daiginjo {
  background-image: url(画像のパス);
}

둥근 자르려는 이미지를 1단계에서 쓴 빈 div 요소의 배경 이미지로 설정해 봅시다.

4. 완성

눈에 띄는 이미지의 중앙을 둥글게 잘라서 표시할 수 있었습니다.

요약

이렇게 하면 circle-img 를 사용해 돌릴 수 있으므로, 편리하다고 생각합니다.

끝.

참고문헌

이미지를 둥글고 원형으로 감아서 표시하는 CSS - 니시시