티스토리 블로그 이미지 최적화 반응형 깨짐없이 나오게 만들기

이쁜것을 선호합니다.

사진을 잘찍는 것은 구도.

 

홈페이지나 블로그 역시 구도인듯 합니다.

원하는 이미지를 깨짐없이 나오게 만드는것.

 

그런데 웹에서 볼때, 모바일에서 볼때 다르죠.

그래서 크게 만들어서 보는 상황에 맞춰서 잘 나오게 만드는것.

 

그것이 참 어려운 부분입니다.

그런데 이 부분을 해결할수 있는 방법.

 

 

본 사이트의 하단에 나오는 이미지 입니다.

본문에 넣으면 깨짐없이 자동 리사이징 되죠.

 

티스토리 블로그 이미지 최적화 반응형 깨짐없이 나오게 만들기

 

그런데 하단에 나오는 부분은 넣은 그대로 나옵니다.

그래서 우측이 짤리게 됩니다.

 

 

이 부분을 해결하는 것은 단순히 몇줄 넣어주는 것만으로 해결됩니다.

CSS 부분을 건드리면 되죠.

 

이것은 정말 중요한 부분입니다.

깨짐이 있으면 정말 보기 싫은 부분이니까요.

 

 

자, 이제 완성된 부분을 한번 보여드릴까요.

요렇게 완벽하게 나와야 합니다.

 

티스토리 블로그 이미지 깨짐현상이 없이 원하는 부분으로 나올수 있게 만드는 코드.

4줄이면 됩니다.

 

티스토리 스킨편집 부분으로 들어갑니다.

HTML 부분이 있고, CSS 부분이 있습니다.

 

CSS부분의 맨 하단에 이 부분을 추가하면 됩니다.

 

여기부터

/* responsive image css */
img
{
 max-width: 100%;
 height: auto;
}

여기까지.

 

 

간단한 부분이라서 별도로 화일로 제공하지 않습니다.

그냥 써서 넣어도 될듯 합니다.

 

저역시 그냥 보고 썼었던 부분이니까요.

티스토리 블로그이미지 최적화 되니 모바일에서도 깔끔하게 잘나오네요.

기분 좋은 마무리 입니다.

 

2018/06/04 - [돈이야기] - 원달러환율 수입농산물 은근히 신경쓰이네요

2018/06/04 - [블로그story] - 블로그연구소 오픈배경 사장님이 열심히 하라고 해서 합니다