목록으로

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

동물원 1년 전 조회 17,238

답변 4

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

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

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

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

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

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

답변 4개

정렬:

채택된 답변

+20 포인트

제이앤

1년 전

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

1.html

2.css

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

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

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

동물원

1년 전

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

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

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

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

RYANRYAN

1년 전

</p>

<p>border-radius: 50%;</p>

<p>object-fit: cover;</p>

<p>

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

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

들레아빠

1년 전

게시판/style.css

</p>

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

width: 500px;

height: 500px;

border-radius: 50%;

object-fit: cover;

}</p>

<p>

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

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

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

로그인

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

답변 4개

공유하기