모든 이미지를 원형태로 보이게 하려면?
본문
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; /* 이미지 비율 유지하면서 잘라내기 */
}
게시판/style.css
#bo_v_con img {max-width:100%;height:auto;
width: 500px;
height: 500px;
border-radius: 50%;
object-fit: cover;
}
border-radius: 50%;
object-fit: cover;
답변 주신 분들 모두 너무 감사드립니다. 채택이 1명만 가능해서 제일 먼저 주신 답변으로 채택했고요.
좋아요 드렸습니다. SIR 에서 도움주시는 분들이 너무많아서 항상 감사드리고 있네요.
답변을 작성하시기 전에 로그인 해주세요.