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

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

QA

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

본문

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

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

 

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

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

이 질문에 댓글 쓰기 :

답변 4

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

 

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 에서 도움주시는 분들이 너무많아서 항상 감사드리고 있네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT