>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 range_javascript 기술을 벗어난 이미지를 제어하기 위해 이미지 크기를 비례적으로 조정합니다.

JavaScript는 range_javascript 기술을 벗어난 이미지를 제어하기 위해 이미지 크기를 비례적으로 조정합니다.

WBOY
WBOY원래의
2016-05-16 17:26:291232검색

Node.js는 이미지 크기를 비례적으로 조정합니다. 웹 페이지가 상대적으로 큰 이미지를 로드할 때 종종 웹 페이지가 변형되어 페이지가 보기 흉해집니다. 그래서 우리는 JS를 사용하여 특정 범위를 넘어서는 이미지를 제어할 것을 생각했습니다. , Script House는 페이지 레이아웃을 안정화합니다. 이 코드 조각은 이 기능을 완성하며 코드가 매우 간결하고 효과가 매우 좋습니다.

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

< ;title> 이미지 크기를 비례적으로 조정합니다<script>function <br>DrawImage(ImgD,iwidth,iheight){ //매개변수(이미지, 허용 너비, 허용 높이) <br>var <br>image=new Image(); image.src=ImgD.src; <br>if(image.width>0 <br>&& image.height>0){ if(image.width/image.height>= <br>iwidth/iheight ){ if(image.width>iwidth){ <br>ImgD.width=iwidth; <br>ImgD.height=(image.height*iwidth)/image.width) <br>}else{ <br>ImgD. width=image.width; <br>ImgD.height=image.height; <br>} <br>}else{ <br>if(image.height>iheight){ <br>ImgD.height=iheight; >ImgD.width=(image.width*iheight)/image.height; <br>}else{ <br>ImgD.width=image.width; <br>ImgD.height=image.height <br>} 🎜>} <br>} <br>} <br></script>
src=http://www.jb51.net/uploadfile /2013/0803/20130803034531502.jpg"
alt="자동 크기 조정 후 효과"

width="100"

height="100"

onload ="javascript:DrawImage(this,80,80)"

/>

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