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

Question

img 태그에 스타일을 줘서, 모든 이미지를 중심을 기준으로 원형으로보이게 하고 싶습니다.

원에서 벗어나는 영역은 보이지 않아도 됩니다.

 

border-radius 값으로 주게되면 이미지 비율에 따라서 타원이 만들어지는데요.

border-radius 값 또는 그외의 CSS 를 통해서 무조건 원으로 보이게 하는 방법이 있을까요?

제이앤 · Accepted Answer

아래의 코드가 도움이 되실지요...

 

1.html

 


 

2.css

 

.circle-image {
    width: 150px; /* 원하는 크기로 설정 */
    height: 150px; /* 동일한 크기로 설정 */
    border-radius: 50%; /* 원형으로 만들기 */
    object-fit: cover; /* 이미지 비율 유지하면서 잘라내기 */
}

동물원 · Answer

답변 주신 분들 모두 너무 감사드립니다.  채택이 1명만 가능해서 제일 먼저 주신 답변으로 채택했고요.

좋아요 드렸습니다. SIR 에서 도움주시는 분들이 너무많아서 항상 감사드리고 있네요.

RYANRYAN · Answer

[code]

border-radius: 50%;

object-fit: cover;

[/code]

들레아빠 · Answer

게시판/style.css

[code]

#bo_v_con img {max-width:100%;height:auto;
width: 500px;
height: 500px;
border-radius: 50%;
object-fit: cover;
}

[/code]

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

답변 4개

공유하기