[HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기

같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?

그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다.

 

이런 세로 이미지를 박스에 풀로 채운다고 치자

이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.

왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),

.box1 {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover; // maintaining its original ratio.
  }
}

 

오른쪽(2번)은 position: absolute로 50% 정렬이다.

.box2 {
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

 

우측은 원본 이미지 크기에서 센터 정렬이기때문에 굉장히 확대되어 보인다. (min-width나 min-height 100%를 주어도 동일)

max-width나 max-height 100%로 맞출수는 있지만

이렇게 이미지가 풀로 안차는 현상이 생긴다.

그렇다고 max-width를 100%로 맞추면 일부 이미지는 잘맞지만,

 

원본이 가로 방향인 이미지는

이렇게 또 상하 여백이 생겨버린다.

max-width, max-height을 둘다 100%로 줘도 여백은 마찬가지다.

 

그래서 나는 display: flex; 속성을 사용한다.

 

아래 코드펜 예제를 통해 두 속성을 비교해 볼 수 있다.

 

 

See the Pen Centering image inside the div by sel (@wimmwell) on CodePen.