BLOGTutorial

Blogger 게시글 내 이미지 자동 리사이즈 하는 법

구글블로거는 이미지를 자동으로 화면 사이즈에 최적화해서 보여주지 않습니다. 그래서 간혹 이런 경우가 생깁니다.

이미지가 너무 크게 본문 사이즈를 넘어가 버리는 것이죠. 이럴 경우 일일이 포스팅을 찾아서 이미지를 조정해 주는 것도 일이고, 차후 레이아웃이 또 바뀔 경우 또 같은 문제가 발생합니다. 때문에 쉽게 전체 이미지 사이즈를 조정할 수 있으면 좋습니다.
css 를 추가해서 간단히 해결할 수 있습니다.
1. 템플릿 편집>맞춤설정>고급>Add css 메뉴로 들어가서 css를 추가해 줄 수 있습니다.

2. Add css에서 아래 코드를 넣어서 저장합니다.

img {
max-width: 620px;
height: auto !important;
width: expression(this.width > 620 ? 620: true);
}

블로그 내 이미지 사이즈가 620px 이상은 넘기지 않는다는 뜻입니다. 물론 템플릿 디자인에 따라 수치는 조정이 가능합니다.이젠 완료되었습니다. 확인하면 이미지가 본문을 벗어나지 않습니다.

3. 완료된 모습, 이미지가 최적화되었습니다.

전자책으로 출판할 좋은 원고나 아이디어가 있으신 분들 문의 대환영~~

This site uses Akismet to reduce spam. Learn how your comment data is processed.