<img>가 부모 요소를 꽉 채우지 못하는 문제

문제 현상

원형 프로필 컴포넌트(<div>) 안에 <img> 태그를 넣어 이미지를 채웠을 때,

이미지가 부모 요소를 완전히 덮지 못하고 하단에 미세한 여백이 생기는 문제

→ 이 여백으로 인해 부모 요소의 배경색이 비쳐 보이게 됨

원인

이 문제 원인은 <img> 태그가 가진 고유한 특성으로 인한 것임

<img> 태그는 기본적으로 display: inline-block; 또는 inline 요소처럼 동작함

브라우저는 인라인 요소를 텍스트(글자)처럼 취급하기 때문에,

알파벳 'g'나 'y'처럼 베이스라인 아래로 내려가는 글자(descender)를 위한 아주 작은 공간을 이미지 하단에 확보함

바로 이 미세한 공간 때문에 의도치 않은 여백이 생기고, 부모 요소의 배경이 보이게 되는 것임

해결 방법

해결책은 <img> 태그를 블록(block) 요소로 변경하여 더 이상 텍스트처럼 취급되지 않도록 하는 것이었음

CSS 코드의 img 선택자 안에 display: block; 속성을 추가


const ProfileImage = styled.div`
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    ${COLORS.primary[400]} 0%,
    ${COLORS.primary[600]} 100%
  );
  overflow: hidden; /* 자식 요소가 부모를 벗어나지 않게 함 */
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 이 코드 추가 */
    display: block; 
  }
`

display: block;을 적용하면 <img> 태그 하단의 불필요한 여백이 사라지고,

부모 컨테이너를 빈틈없이 완벽하게 채우게 됨