세로가 긴 이미지, 가로가 긴 이미지 div에 맞추기

.img-container {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.img-container img.vertical {
  width: 100%;
  height: auto;
}

.img-container img.horizontal {
  width: auto;
  height: 100%;
}

 

 

 임의로 가로 300px 세로 200px인 div에 딱 맞는 이미지를 넣으려고 할때 (마치 배경이미지처럼)

 

div보다 세로가 긴 이미지인 경우 (.vertical)

width:100%주고 height는 자기가 원래 가지고 있는 비율대로 나오게 하기 위해 auto를 준다.

그러고 나서 개발자 도구를 켜보면

이미지가 div의 width에는 꽉 차지만 여전히 세로는 삐져나와 있는 것을 확인할 수 있다. 

(아마 그 아래 다른 요소가 있다면 img 위로 올라와있을지도..)

이 부분을 처리해주기 위해

부모 div에

overflow:hidden -> 튀어나오는 부분 잘라주기

display:flex, justify-content:center, align-items:center을 주면 된다.

 

div보다 가로가 긴 이미지인 경우(.horizontal)

width:auto, height:100%;

 나머지는 같다.