티스토리 이미지가 이상하게 나올 때 해결방법

티스토리를 처음 사용하면서 이미지를 등록하고 나면 이미지가 이상하게 나오는 경우들이 있는데, 해결방법 공유합니다.

우선 글 쓰는 환경마다 다를 수는 있으니 제 글 쓰는 환경도 참고해 주세요.

1. 사용 OS : MAC

2. 사용 툴 : 맥용 MARS EDIT 에서 Movable Type API 사용

3. 등록 이미지 사이즈 : 가로 800px 기준 등록

웹에서는 대부분 문제가 없었으나, 모바일에서 특히나 별도의 모바일웹용 스킨을 사용하니 이미지가 화면을 벗어나거나 가로세로 비율이 이상하게 찌그러져 나오는 등의 문제가 있었습니다.

이미지가 길죽하게 나오니 보기 싫더라고요.

원래 이런 이미지가 나와야 하는데요.

이렇게 이미지가 길죽하게 비율이 안맞게 나오는 경우 입니다.

처음에는 이미지를 우선 등록한 후에 자동으로 정의되는 width, height 값을 아예 없애버리고 css에서 width 100%만 설정해 줬습니다.

height 값을 그대로 두면 픽셀만큼 늘어나서 비슷하더라고요.

그 다음에는 이미지가 작은 경우에도 너무 크게 나오거나 하는 경우가 있어서 max-width값을 설정해서 너무 이미지가 크게 나오지 않도록도 조정해 봤습니다.

그렇게 한참을 쓰고 있었는데... 글 올릴때마다 올리고 나서 width, height값 찾아서 지우는 것도 일이되더군요.

그래서 나름 고심한 결과, Jquery를 써서 해결하기로 했습니다.

만들어야 하는건 등록된 html 코드상에 있는 width, height 값 삭제와 CSS로 width 100%를 적용만 해주면 됩니다.

CSS 적용하고 js 파일 적용하는건 이전 글에서 설명 드렸으니 참고해 주세요.

[개발TIP] - 티스토리 모바일웹용 CSS 만들기 - 이미지,폰트,메뉴숨기기

[개발TIP] - 티스토리 모바일웹 스킨 CSS 적용

이제 등록된 글에서 가로 세로 속성을 삭제하는 jquey 스크립트만 만들어서 외부에서 불러오는 js 파일에 넣어주면 되겠죠?

제가 쓰는 모바일웹용 스킨 기준이니, 클래스 이름은 적용하는 스킨이나 페이지에 따라 다르게 적용하시면 됩니다.

특정 클래스 제 경우 area_content에 속해있는 img 태그에 있는 속성 중 height값을 제거하는 스크립트 입니다.

width값도 제거하시려면 동일하게 한줄 더 넣어주시면 됩니다.

간단하죠? 너무 간단하네요... 움... -_-;

1 2 3

jQuery(document).ready(function(){ jQuery('.area_content img').removeAttr('height'); });

이렇게 하고 css파일에 동일하게 area_content 내부 img 태그에 width값을 100%로 잡아 주시면 됩니다.

그럼 즐거운 티스토리 라이프 되시길~