티스토리 강좌 / 이미지가 본문 가로폭을 벗어나는 문제 해결하는 방법
본문 가로폭 설정
티스토리 스킨에서 본문 가로폭 설정은 index.xml 파일에서 합니다.
스킨 등록 후 본문 가로폭 변경은 [글 설정 - 글 환경 - 글쓰기 가로폭]에서 합니다.
글쓰기 가로폭이 정해지면 이미지를 넣을 때 이미지의 최대 가로폭이 글쓰기 가로폭이 됩니다.
스킨 변경 시 문제점
스킨을 변경하면 글쓰기 가로폭도 스킨 설정에 따라 바뀝니다. 그리고 본문에 넣는 이미지의 최대 가로폭도 변경됩니다.
하지만, 스킨을 바꾸기 전에 삽입한 이미지의 크기는 바뀌지 않습니다.
따라서 스킨을 바꾸면서 가로폭이 줄었을 때 이미지가 본문을 벗어나는 현상이 발생할 수 있습니다.
해결 방법
이를 해결하는 방법은 CSS에 다음의 코드를 넣는 것입니다.
img {
max-width: 100%;
height: auto;
}
span.imageblock {
max-width: 100%;
height: auto;
}
이미지의 최대 가로폭을 100%로 설정하고, 원본의 가로 세로 비율을 유지하도록 세로 길이를 맞추라는 뜻입니다.
참고로, 위 코드를 넣으면 티에디션에서 썸네일이 이상하게 나올 수 있습니다. 그럴 땐 CSS에 다음의 코드를 추가합니다.
#ttCanvas img {
max-width: none;
}
참고
티스토리에는 이미지를 두 개 또는 세 개를 가로로 넣는 기능이 있는데, 그렇게 이미지를 넣으면 위 방법이 통하지 않습니다. 반응형 스킨으로 바꾸었을 때도 문제가 되므로, 가급적 이미지는 하나씩 넣는 게 좋습니다.