CSS 이미지 크기 자동 조절 (스케일링)

CSS에서 이미지나 비디오의 스케일링을 자연스럽게 하는 방법이다. 내가 기억하기 위해 메모차 남겨놓는 포스팅.

본문 내 삽입된 이미지 크기 자동 조절

브라우저 크기를 조절해도 본문 내 삽입된 이미지들이 망가지지 않고 브라우저 크기 따라 자연스럽게 조정될 수 있도록 하려면 아래와 같이 써주는 게 좋다.

.container {
  width: 70%;
  height: 200px;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

div.container의 overflow: hidden; 속성을 지정했기 때문에 컨테이터보다 큰 콘텐츠는 숨겨진다.

그리고 img는 위 컨테이너 너비에 맞게 조정이 된다. height: auto; 로 하여, 이미지의 높이는 너비에 비례하여 자동으로 조정 된다. 그리고 display 속성은 기본값인 inline-block이 아니라 아닌 block 요소로 표시하기.

참고로 위의 예는 이미지의 너비가 컨테이너의 너비에 따라 조정되는 거라, 이미지가 컨테이너보다 큰 경우 세로 부분이 오버플로우 되어 잘린다. 이걸 방지하려면 너비와 높이를 바꿔서 이렇게 max-height: 100 %; width: auto; 적어주면 된다. (이러면 이미지 높이가 컨테이너 높이에 따라 조정되는 거라, 이미지가 컨테이너보다 큰 경우 이미지의 가로 부분이 오버플로우 되어 표시되지 않는다.)

배경 이미지 크기 자동 조절

배경 이미지도 CSS 몇 줄로 브라우저 크기에 따라 자동으로 조절되도록 할 수 있다.

body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

background-repeat: no-repeat; 이건 이미지를 바둑판처럼 반복하지 말라는 뜻이다.

그리고 핵심은 background-size: cover; 인데, 이렇게 해야 가로/세로 비율을 유지하면서 요소의 전체 배경을 덮어준다. 이 때 이미지의 크기가 컨테이너의 크기를 초과하면 이미지의 일부만 표시된다.