티스토리 강좌 / 이미지가 본문 가로폭을 벗어나는 문제 해결하는 방법

본문 가로폭 설정

티스토리 스킨에서 본문 가로폭 설정은 index.xml 파일에서 합니다.

스킨 등록 후 본문 가로폭 변경은 [글 설정 - 글 환경 - 글쓰기 가로폭]에서 합니다.

글쓰기 가로폭이 정해지면 이미지를 넣을 때 이미지의 최대 가로폭이 글쓰기 가로폭이 됩니다.

스킨 변경 시 문제점

스킨을 변경하면 글쓰기 가로폭도 스킨 설정에 따라 바뀝니다. 그리고 본문에 넣는 이미지의 최대 가로폭도 변경됩니다.

하지만, 스킨을 바꾸기 전에 삽입한 이미지의 크기는 바뀌지 않습니다.

따라서 스킨을 바꾸면서 가로폭이 줄었을 때 이미지가 본문을 벗어나는 현상이 발생할 수 있습니다.

해결 방법

이를 해결하는 방법은 CSS에 다음의 코드를 넣는 것입니다.

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

이미지의 최대 가로폭을 100%로 설정하고, 원본의 가로 세로 비율을 유지하도록 세로 길이를 맞추라는 뜻입니다.

참고로, 위 코드를 넣으면 티에디션에서 썸네일이 이상하게 나올 수 있습니다. 그럴 땐 CSS에 다음의 코드를 추가합니다.

#ttCanvas img {
  max-width: none;
}

참고

티스토리에는 이미지를 두 개 또는 세 개를 가로로 넣는 기능이 있는데, 그렇게 이미지를 넣으면 위 방법이 통하지 않습니다. 반응형 스킨으로 바꾸었을 때도 문제가 되므로, 가급적 이미지는 하나씩 넣는 게 좋습니다.

티스토리 강좌

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침