티스토리 블로그, 이미지 잘림현상 해결하기

티스토리 블로그를 운영시에 발생하는 문제중에 하나인 이미지 잘림현상을 해결방안을 살펴보기로 하자. 해당 문제는 생각보다 빈번하게 발생하는 문제이다. 이러한 문제가 발생되는 이유는 다음과 같다.

- 티스토리 블로그의 고화질의 이미지 올릴 경우
- 티스토리 블로그의 글설정 옵션에서 변경 할 경우
- 티스토리 블로그의 스킨을 변경 할 경우

우선 모든 문제가 발생되는 이유는 고화질 이미지를 올릴 시, 이미지는 본문 가로 최대사이즈로 자동맞춤이 되기 때문이다. 본문사이즈가 750 px 이라면 더 큰 사이즈는 모두 750 px에 자동 맞춤이 되고, 향후 본문 사이즈가 700 px 변경된다면 이전에 올려진 이미지에는 적용된 이미지에는 여전히 750 px이기에 이미지가 본문 가로폭을 넘어가는 문제 발생하게 된다. 이를 해결하는 간단한 방법은 style.css에 다음의 코드를 넣는 것이다.

img {max-width: 100%; height: auto;}
span.imageblock {max-width: 100%; height: auto;}

해당코드는 이미지의 최대 가로폭을 100%로 설정하며, 원본의 가로 세로 비율을 유지하도록 세로 길이를 변경된다. 대부분의 경우 위 두 줄의 코드면 이미지가 커서 생기는 문제를 해결할 있다. 또한 코드 적용 후에 티에디션 썸네일 사이즈가 이상하게 노출된다면 style.css 제일 밑에 다음의 코드를 추가하도록 한다.

#ttCanvas img {max-width: none;}

또한, 사진이 2열 구조배치해서 적용이 안될 경우는 skin.html에서 </head> 위에 다음의 코드를 적용하도록 한다.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function() {
    $('.imageblock').css('width','');
  });
</script>