CSS를 사용하여 Blogger 이미지 크기 자동 조정

템플릿 > HTML 편집으로 이동하여 ]]> </b:skin> 위에 ]]> </b:skin>다음에 아래 코드를 복붙해주세요

모든 이미지의 너비를 600px로 설정할려면 이미지가 600px보다 크거나 작은 경우 이미지가 늘어나거나 픽셀화되어 나타날 수 있습니다.

.post-body img { width:600px; height:auto; }    (말 그대로 600px로 고정하는것임)

모든 이미지 의 너비 가 최소 600px이기를 원하면 이 코드를 사용하십시오. 이로 인해 이미지가 설정된 크기보다 작은 경우 이미지가 늘어납니다.

.post-body img { min-width:600px; min-height:auto; }     (최소 600px보다 작으면 키워줌)

이미지 너비를 최대 600px 로 하려면 이 코드를 사용하세요, 이렇게 하면 더 큰 이미지의 크기가 조정되어 공간에 적절하게 맞춥니다.

.post-body img { max-width:600px; max-height:auto; }      (최대 600px로 고정하는거임)

그런 다음 표시(숫자px)된 너비 값을 블로그 게시물 영역에 맞는 숫자로 변경합니다. 게시물 너비 영역이 올바르게 설정된 경우 위의 값을 100%로 변경할 수도 있습니다 .

일반적으로 필요하지는 않지만 A, B 및 C에 가입할 수도 있습니다. 이미지를 업로드할 때 최상의 품질을 얻으려면 원본 크기를 선택해야 합니다.

참고로 한방에 업로드할때는 HTML 설정에서 하는걸 추천합니다. 그래야 한방에 원본 설정이 가능합니당

스크립트를 사용하여 Blogger 이미지 크기 자동 조정

일부 블로그 템플릿에서는 잘 작동하지 않았지만 다른 템플릿에서는 잘 작동합니다.(내꺼요) 템플릿 > HTML 편집 > 위의 스크립트에 다음 스크립트를 추가합니다 </head> 이후에

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

/**

this script was written by Confluent Forms LLC http://www.confluentforms.com

for the BlogXpertise website http://www.blogxpertise.com

any updates to this script will be posted to BlogXpertise

please leave this message and give credit where credit is due!

**/

$(document).ready(function(){

    // the dimension of your content within the columns

    var areawidth = $('#Blog1').width();

    $('.post-body').find('img').each(function(n, image){

        var image = $(image);

        var height = image.attr('height');

        var width = image.attr('width');

        var newHeight = (height/width * areawidth).toFixed(0);

        image.attr('width',areawidth).attr('height',newHeight);

        var greater = Math.max(areawidth,newHeight);

        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});

    });

});

//]]></script>

그런 다음 위의 템플릿 > HTML 편집 >에 다음 코드를 추가하고 게시물 영역을 초과하는 경우 이미지를 다시 게시물 영역으로 이동하도록 값을 ]]> </b:skin> 에서 변경해야 할 수 있습니다.(기본 사이즈 변경)

이미지(사진)를 등록할 때 자동으로 여백 만들때

왼쪽으로 이동할려면

.post-body img { margin-left: -30px;}

또는 오른쪽으로 이동하려면

.post-body img { margin-left: 30px;}