반응형, 동적 블로그 스킨에서 이미지 사이즈 자동 맞춤, 방법

 

안녕하세요. 지금 사용하고 있는 반응형 웹사이트 스킨을 사용하던 도중 MS 오피스 워드의 api를 사용하여 이미지를 업로드 할 경우 이미지의 사이즈가

 글쓰기 칸, 가로 규격보다 크게 잡혀서 일부 사이즈가 잘리거나, 혹은 모바일로 확인 하였을 때 절반 정도만 보이는 등

이미지의 잘림 현상이 심해서 이를 찾아보았더니, 워드 API 를 통해 수정하는 방법보다 CSS 의 코드 삽입을 통해 이미지를 수정하는 것이 훨씬 쉽다고 생각하여 검색-적용 해 보았습니다.

 

우선 제가 적용한 CSS 코드에 대해서 설명하자면 CSS 이미지란에

 

 

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

 

을 삽입하여 이미지의 사이즈를 자동 조절하는데 성공 하였습니다.

 

 

이렇게 입력 해주면 되겠습니다.

 

또한 제가 참고한 사이트에 따르면 위의 코드는 ie 8에서는 적용이 되지 않기 때문에 이를 강제 소스 삽입으로 적용하기 위해선 위의 코드에 ie8에서 사용가능한 코드를 한 줄 추가 해야하는데요.

 

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

 

위의 노란색으로 표시된 부분을 추가하면 된다고 합니다.

 

 

오피스 워드의 를 통해 이미지를 입력하여도 이미지의 사이즈가 글 작성 사이즈, 가로 픽셀에 맞춰 적용되는 방법에 대해 알아 봤는데요. 

이제는 표 사이즈를 오토로 적용하는 방법에 대해서 알아봐야 할 것 같습니다. (라고 해도 표의 경우는 대부분이 %를 사용하는 방법이라 일일히 수정을 해주는 방법 밖에 없는건가… 싶네요.

 

 

 

이 모든 것에 대한 자료 출처 및 정보 는

http://aiiblue.tistory.com/67 에서 가장 큰 도움을 받았습니다.