2/07/2019

How to Re-Size Image in Blogger

이거 이전글(video resize) 작성하면서 블로그 내 이미지도 최대 크기로 조정했는데, 메모할겸 남겨둡니다.
google blogger에서 첨부/삽입한 이미지는 별로의 class,id를 주지 않기 때문에 .post-body(본문)에 직접 css를 지정해주어야합니다.
어차피 .post-body에서 img 태그가 쓰이는건, 첨부한 이미지가 전부인지라, 최대 크기 및 테두리만 지정하였습니다.
.post-body img{
border:1px solid #333333; 
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
혹시나 비슷한거 적용하신다면 참고하시길 바래요 :)


최대 크기가 되었습니다.

주의사항

다만 하나 주의해야할 부분이 있는데, 위에 css 코드로는 글 작성 구간에서 직접 크기 조절한 부분은 처리할 수 없습니다. (글 작성에서 작게,보통,크게 등을 했을 때 img 태그에 width, height 속성으로 직접 붙게되는데 css 우선순위 상 가장 높은 순위라 이미지 로드가 끝난 후 리사이징하지 않는 이상 변경이 불가능해집니다.

<!-- 작성 구간에서 크기조정을 해버리면, 이렇게 width, height가 강제로 붙어집니다. -->
<img border="0" data-original-height="375" data-original-width="938" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzjRcMf0IrKNaS-nkUJ_P8x5T2tfpBNxayVSMSKKo_dp3LG-LybzeMv5Ut_ech0Lrhsszu11SJQQEpiiAbLSOclz2xRtVi5IF-na8Qj_j685v57cp2XLlg3U8lCP3vG_WIbHczybFCwo/s640/Selection_085.png" width="640" />




HAHWUL

Security engineer, Gopher and H4cker!

Share: | Coffee Me:

1 comment:

  1. 저는 페이지 로드 속도 때문에 이미지 크기는 그냥 냅두기로 했습니다.. 허헣

    ReplyDelete