티스토리 이미지 잘림 현상, 본문에 삽입된 이미지 사이즈 크기 수정하기 (고래스킨)

티스토리 이미지 잘림 현상, 본문에 삽입된 이미지 사이즈 크기 수정하기 (고래스킨)

티스토리 스킨을 기본 스킨인 오디세이 스킨에서 고래스킨으로 변경하였습니다. 변경하면서 기존에 삽입한 이미지가 본문 크기와 맞지 않게 출력되며 이미지 잘림 현상이 있었는데요. 이 부분을 수정하고 싶었습니다.

▲ 본문에 삽입된 이미지 짤림 현상이 발생

티스토리 스킨 변경시 변화하는 본문 폭 때문에 이전에 포스팅한 이미지가 잘리는 문제로 고민하는 분이 계실 것 같아 수정 과정을 정리해보았습니다.

티스토리 본문 이미지 크기 설정하기

이미 티스토리에 글을 많이 작성하셨다면 하나하나 본문에서 잘린 이미지가 담긴 포스팅을 수정하기에 부담이 될 수 있습니다. 아무래도 일괄적으로 본문에 삽입된 이미지 크기를 조절하도록 css를 수정하는 것이 더 간단한 일입니다. 티스토리 본문에 삽입된 이미지 크기를 조금 줄여서 이미지 전체가 보이도록 설정하였습니다.

본문 이미지 크기를 일괄적으로 수정하는 방법은 다음과 같습니다.

1. 티스토리 관리자페이지 - [꾸미기] - [스킨편집] - [HTML 편집] - [css] 클릭
2. 본문 이미지 속성 css를 추가하기

위와 같이 간단하게 진행할 수 있습니다. 좀 더 자세하게 그 과정을 작성해보았습니다.

1. 관리자 페이지에서 css 수정 페이지로 들어가기

▲ 티스토리 관리자페이지 - [꾸미기] - [스킨편집]으로 들어갑니다.

▲ [html 편집]을 클릭합니다.

▲ [CSS]를 클릭합니다.

2. 이미지 css 속성을 추가합니다.

위와 같이 본문에 해당하는 div 이름과 img를 찾아 max-width: 95% !important;를 추가하고 css를 저장하시면 완료가 됩니다.

---

max-width는 최대 가로 너비 폭을 말하는데요. 반응형 블로그이기 때문에 특정 숫자가 아니라 퍼센트로 설정하였습니다. 블로그 본문 사이즈에 맞춰 95% 수치를 변경하셔서 알맞는 크기로 수정하셔서 이용하시면 됩니다.

검색 방법은 Ctrl + F 로 원하는 검색어를 쉽게 찾으실 수 있습니다.

고래 스킨은 본문 div 이름이 post-content로 되어있습니다. post-content div에서 img라는 속성을 가진 태그가 등장할 경우 속성을 일괄적으로 설정할 수 있습니다.

여기서 이미지 크기를 100%에서 95%로 줄여서 본문 안에 이미지가 들어올 수 있도록 css를 추가하였습니다.

오디세이 스킨의 경우 본문에 해당하는 div 이름이article-view이기 때문에 .article-view img으로 css를 검색하여 max-width 값을 입력하시면됩니다. border-width 은 이미지 테두리 값을 말합니다.

위와 같이 본문 div img값을 설정해도 이미지 크기 변경이 적용이 되지 않는 경우에는 #tt-body-page figure.imageblock img, figure.imageblock img을 찾아서 최대 가로 너비 값인 max-width을 설정하는 것도 방법입니다.

#tt-body-page figure.imageblock img, figure.imageblock img {
	max-width: 95%!important;
}

figure.imageblock img 값에 !important가 설정되어있어서 적용되지 않는 것일 수 있기 때문입니다.

이미지 테두리를 일괄적으로 한번에 css로 설정하는 방법은 [링크] 티스토리 이미지 외곽선 테두리 만드는 방법 (css 수정) 오디세이 스킨 적용을 참고하시면 좀 더 자세한 내용을 확인하실 수 있습니다.

이미지가 짤리는 이유는 무엇인가

티스토리 새 에디터로 이미지를 삽입하여 작성할 경우, html 화면에서 위와 같이 data-origin-width="수치"값이 자동으로 설정됩니다. px 값으로 설정이 되는데요.

[##Image|kage@filepath/img.jpg|alignCenter|data-filename="img.jpg" data-origin-width="가로크기" data-origin-height="세로크기"|||##]

이러한 구조로 되어있습니다.이 때 가로 크기가 고정되어 변경이 되지 않아서, 스킨을 수정하여 본문 크기가 달라지게 될 경우 이미지가 본문 폭 보다 큰 경우 잘리는 현상이 되는 것 같습니다.

아무쪼록 이미지가 비슷한 크기로 일부분이 보이지 않게 되었다면 이미지 크기를 줄여서 출력하는 css를 수정하여 모바일과 PC 버전 모두에서 제대로 보이도록 수정할 수 있습니다.