2026, 새로운 도약을 시작합니다.
SIR
목록으로
이전글 다음글

모든 이미지를 원형태로 보이게 하려면? 채택완료

동동물원
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 17,489
답변 4
목록

img 태그에 스타일을 줘서, 모든 이미지를 중심을 기준으로 원형으로보이게 하고 싶습니다.

원에서 벗어나는 영역은 보이지 않아도 됩니다.

border-radius 값으로 주게되면 이미지 비율에 따라서 타원이 만들어지는데요.

border-radius 값 또는 그외의 CSS 를 통해서 무조건 원으로 보이게 하는 방법이 있을까요?

#영카트5 #그누보드5 #css #원형

답변 4개

채택된 답변
+20 포인트
제

아래의 코드가 도움이 되실지요...

1.html

<img src="image.jpg" alt="Example" class="circle-image">
 

2.css

.circle-image {
    width: 150px; /* 원하는 크기로 설정 */
    height: 150px; /* 동일한 크기로 설정 */
    border-radius: 50%; /* 원형으로 만들기 */
    object-fit: cover; /* 이미지 비율 유지하면서 잘라내기 */
}
 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

동

답변 주신 분들 모두 너무 감사드립니다.  채택이 1명만 가능해서 제일 먼저 주신 답변으로 채택했고요.

좋아요 드렸습니다. SIR 에서 도움주시는 분들이 너무많아서 항상 감사드리고 있네요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

R
Copy 


border-radius: 50%;

object-fit: cover;
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

들레아빠

게시판/style.css

Copy 


#bo_v_con img {max-width:100%;height:auto;

width: 500px;

height: 500px;

border-radius: 50%;

object-fit: cover;

}
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고