JS CSS 이미지 자동 크기 조정 및 적응형 size_javascript 기술

CSS 제한사항을 추가했습니다:

코드 복사 코드는 다음과 같습니다:

div img {} {
최대 너비:600px;
너비:600px;
너비:표현(document.body.clientWidth>600?"600px":"auto");
오버플로:숨김;
}

◎ max-width:600px; IE7, FF 및 기타 IE가 아닌 브라우저에서는 최대 너비가 600px입니다. 하지만 IE6에서는 작동하지 않습니다.
　◎ 너비:600px; 모든 브라우저에서 이미지 크기는 600px입니다.
◎ 이미지 크기가 600px보다 크면 자동으로 600px로 줄어듭니다. IE6에서 유효합니다.
◎overflow:hidden; 이미지 크기 조절 실패로 인한 늘어나거나 변형되는 것을 방지하기 위해 초과된 부분을 숨깁니다. < script 언어="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i )

{ imgObj document .getElementsByTagName("img")[i]; //자동으로 크기가 조정될 수 있도록 높이나 너비 중 하나만 판단하는 것이 좋습니다. if ( imgObj . width > 500 ) / /이미지 너비를 판단하고, 700보다 큰 경우 700으로 설정합니다. 값은 직접 수정할 수 있습니다. { imgObj . width = 500 } if ( imgObj .height > 700 ) // 사진의 높이를 결정하고, 700보다 크면 700으로 설정합니다. 값은 직접 수정할 수 있습니다.

{
imgObj . }
}



별도의 그림을 제어하려면 다음을 사용하세요.




코드 복사


코드는 다음과 같습니다.


<script></div> var abc=document.getElementById("abc");<br>var imgs=abc.getElementsByTagName ("img");<br>for (var i=0,g;g=imgs[i];i )<div class="codetitle">g.onload=function(){if (this.width>300){this.width =300}else{if (this.height>300)this.height=300}}<span></script>테스트가 IE 및 FF에서 통과되었습니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.