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

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

QA

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

답변 4

본문

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,086
© SIRSOFT
현재 페이지 제일 처음으로