CSS - 이미지 크기가 콘텐츠 창보다 클 때 자동으로 이미지 사이즈 조절

서브 블로그를 키우다보니 뭔가 어색하게 안 맞는 것들이 간혹 보이기 시작합니다. 그래도 일단은 해야하니까 다양하게 여러가지 부분적으로 만져주는데요. 그중에서도 가장 문제가 되는 것 중 하나였던 이미지 사이즈 자동 조절입니다. 몇몇 반응형 스킨에서는 이미지 가로사이즈를 자동으로 조절해주는 기능이 있기도 하지만, 없는 경우도 있어서...

제가 사용하고 있는 CSS 의 이미지 사이즈 자동 조절 코드는 다음과 같습니다.

img {
  max-width: 100%;
  width: auto !important;
  height: auto: !important;
}

상-하단으로 이미지의 최대 비율 100% 를 맞추도록 하고, 티스토리에서 쉽고, 빠른 적용을 위해 CSS 상단에 넣기 때문에 width 와 height 뒤에 !important; 를 적용하여 줌으로서 뒤에 올 값보다 우선적으로 적용되도록 설정해 줍니다.

max-width: 100%; 는 이미지의 최대 크기를 xx% 만큼 제한하겠다는 건데, 100% 는 이미지의 100% 를 업로드한 이미지 그대로 전부 표현하는 방식이고, 80% 로 올린다면, 가로픽셀 1000px 의 80%에 해당하는 800px 만 표현이 된다.

사실 간단하게 사용하자면 다음과 같이 사용을 할 수도 있는데요.

img {
  max-width: 100%;
}

물론 간편하게 사용하자면, 상단 코드가 편합니다만, 

img {
  max-width: 100%;
  width: auto !important;
  height: auto ; 
}

가로값에 height: auto ; 를 넣어 줌으로서 콘텐츠 창 크기의 변경에 따른 세로 사이즈 역시 자동적으로 변환, 조절이 되도록 입력해주는 것이 페이지에서 이미지를 안정적이라 생각됩니다.

width: auto !important; 값을 width: expression(this.width > 700 ? 700: true); 처럼 잡아주게 되면 100% 표시가 되데, 만약 반응형 페이지의 모바일 사이즈로 전환시 (새로고침 후) 이미지의 사이즈를 700에서 잡아준 수치로 자동적으로 설정해 줍니다.

윈도우 익스플로러 8 이하에서는 코드가 적용이 되지 않기 때문에, 강제적으로 소스를 입력해줘야 하는데요. width: auto\9 !important; /* ie8 */를 추가적으로 입력해 주면 되겠습니다.

img {
  max-width: 100%;
  width: auto\9 !important; /* ie8 */
  width: auto !important;
  height: auto ; 
}

코드 전체적으로만 보면 매우 별것 없지만 이것으로도 잠깐 고생했고, 오랜만에 배운답시고 고생햇네요.