[CSS] DIV 크기에 맞게 이미지 넣기

웹 디자인을 할 때 이미지를 특정 모양으로 자르고 싶거나, 다양한 크기의 이미지를 동일한 크기로 맞추고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 원 모양의 박스에 넣어 사용하고 싶을 때, CSS를 이용하면 손쉽게 작업할 수 있습니다.

예시사진

 

이번 포스트에서는 HTML과 CSS를 이용해 부모 요소 안에 이미지를 깔끔하게 맞추는 방법을 소개합니다. 핑크색 원 안에 이미지를 딱 맞게 넣는 여러 가지 방법이 있지만, 여기서는 부모와 자식 요소의 CSS 설정을 통해 깔끔하게 이미지를 맞추는 방법에 대해 설명하겠습니다.

 

HTML 구조

div 요소가 부모이고, 이미지가 자식 요소로 들어갑니다.

<div class="image_box">
    <img src="image.jpg" alt="Example Image">
</div>

- 위 HTML 코드에서 image.jpg 부분은 실제 이미지 URL로 대체해 주세요.

 

CSS 코드

CSS를 사용하여 부모 요소(.image_box)와 자식 요소(img)의 스타일을 지정해보겠습니다.

/* 부모 */
.image_box {
  border-radius: 50%; /* 원형으로 만들기 */
  width: 250px; /* 박스 너비 *
  height: 250px; /* 박스 높이 */
  overflow: hidden; /* 넘치는 이미지 숨기기 */
}

/* 자식 */
.image_box img {
  width: 100%; /* 부모의 너비에 맞추기 */
  height: 100%; /* 부모의 높이에 맞추기 */
  object-fit: cover; /* 이미지가 부모의 크기에 맞춰지도록 자르기 */
  object-position: center; /* 중앙 정렬 */
  display: block; /* 여백 제거 */
}

 

사용 예시

아래는 위의 CSS와 HTML 코드를 적용했을 때의 결과물입니다.

CSS 적용 화면

 

---

이렇게 간단한 CSS를 통해 다양한 이미지 형태와 크기에 맞게 조정하여 디자인에 적용할 수 있습니다. 이미지 갤러리, 프로필 사진 등 다양한 웹 페이지 요소에 활용해보세요.

 

이 방법을 통해 디자인의 일관성을 유지하고, 다양한 이미지를 균일하게 표현할 수 있습니다. CSS의 강력한 기능을 활용하여 웹사이트 디자인을 더욱 매력적으로 꾸며보세요. 이 포스트가 도움이 되셨다면, 더 많은 CSS 팁을 위해 블로그를 구독해 주세요!