[티스토리 이미지] 글 삽입 이미지 사이즈 크기 조절 방법

[티스토리 이미지] 글 삽입 이미지 사이즈 크기 조절 방법

tistory.com

티스토리 블로그에 글을 작성하고 삽입하는 이미지의 크기가 이상할때가 종종 나타 난다.

아주 짜증이 날 정도 이미지 사이즈 크기 조절이 어려울 때가 있다.

그래서 포스팅을 잠깐 해 본다.

html/css 수정 메뉴에서 보면,

css 클릭하고 다시 보자.

#content {

margin:0;

float:left;

width:/*@post-width*/ 610px /*@*/;

#content .entry  { 

width:/*@post-width*/ 610px /*@*/;  

padding:0 0 15px 0; 

overflow:hidden; }

.article    {  

width:/*@post-width*/ 610px /*@*/; 

font-size:/*@post-body-font-size=*/ 12px /*@*/; 

font-family: /*@post-body-font-family=*/ dotum /*@*/; 

color:/*@post-body-color=*/ #666666 /*@*/; 

overflow:hidden;}

.entry .article img {

display: inline-block;

/*width: auto\9 !important; /* ie8 */

width: auto !important;

width: 100%;

max-width: 100%;

height: auto !important;

글쓰기 가로폭과 이미지

티스토리 에디터로 삽입된 이미지는 이를 본문에 출력할때 실제 원본 크기가 아닌 사진 첨부 당시 설정되어 있던 글쓰기 가로폭의 크기로 사본을 저장해두고 이 사본을 본문에 출력한다. 이는 앞서 언급한 유동적인 본문의 너비를 가지는 스킨 디자인이나 이미지가 본문의 여백을 오버랩하는 디자인을 구상한다면 걸림돌이 될 수 있는 부분이다. 또한, 스킨 변경시에도 이전 스킨의 가로폭에 맞게 이미지들의 사본이 저장되어 있기 때문에 스킨 변경 후 의도와는 다른 이미지들의 크기에 당황스러울 수도 있다.

이를 보완하기 위해서는 처음부터 글을 작성할때 글쓰기 가로폭을 넉넉히 잡아주는 것이다. 큰 이미지를 적당히 줄이는 것은 이미지의 훼손이 적지만 작은 이미지를 본문의 크기에 맞게 늘이는 것은 이미지의 훼손이 크기때문에 앞으로의 스킨 변경을 고려해서 적당한 가로폭을 설정하도록 하자. 물론, 증가시킨 가로폭의 크기만큼 이미지의 사본이 저장되기에 트래픽증가와 좀 더 더딘 로딩이 있을 수 있다는 것에 주의하자.