이 코드에서 구현 된 기능은 일반적으로 직면 한 DIV에 IMG가 포함되어있을 때 IMG 이미지 크기를 알 수없고 DIV 크기를 알 수 없을 때 이미지 자체가 DIV 컨테이너 크기보다 작은 경우 이미지 크기가 처리되지 않는다는 것입니다. 뻗어 있으면 그림이 왜곡 될 수 있기 때문입니다.
더 이상 고민하지 않고 코드를 업로드하고 테스트, Firefox, Google, IE6, IE7/8과 호환됩니다.
다음은 JS 코드입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"언어 = "javaScript">
Window.onload = function () {
changeimgsize ();
}
함수 changeimgsize () {
var getContainer = document.getElementById ( 'imgcontainer');
var getimg = getContainer.getElementsByTagName ( 'IMG') [0];
var fw = getContainer.offsetWidth- (2*getContainer.clientleft);
var fh = getContainer.offSetheight- (2*getContainer.clientTop);
var iw = getimg.width;
var ih = getimg.height;
var m = iw/fw;
var n = ih/fh;
if (m> = 1 && n <= 1)
{
iw = math.ceil (iw/m);
ih = math.ceil (ih/m);
getimg.width = iw;
getimg.height = ih;
}
else if (m <= 1 && n> = 1)
{
iw = math.ceil (iw/n);
ih = math.ceil (ih/n);
getimg.width = iw;
getimg.height = ih;
}
else if (m> = 1 && n> = 1)
{
getmax = math.max (m, n);
iw = math.ceil (iw/getmax);
ih = math.ceil (ih/getmax);
getimg.width = iw;
getimg.height = ih;
}
if (getimg.height <fh)
{
var getDistance = math.floor ((fh-getimg.height)/2);
getimg.style.margintop = getDistance.toString ()+"px";
}
}
</스크립트>
다음은 HTML 코드입니다.
코드 사본은 다음과 같습니다.
<div id = "imgcontainer"> <img src = "images/444.jpg"/> </div>
CSS 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
.sy_pic {너비 : 200px; 높이 : 300px; 국경 :#000 Solid 5px; 텍스트 정렬 : 센터;}
이미지 주소를 직접 변경하여 사용하십시오. 질문이나 조언이 있으시면 QQ 그룹을 추가하십시오 : 255708401.