Home > Developer > Web Develop
This JS is generally used to control the picture to fill the box, but the proportion is not changed, and the absolute Bureau
Principle: Determine the relationship between the aspect of the picture and the width of the box, and then control the zoom and positioning of the image by proportion.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">#img{width:600px;Height:400px;position:relative;Overflow:Hidden;background:#996699;}</style></Head><Body><DivID= "img"><imgsrc= "Images/test_01.png"onload= "resize_img (this,600,400)" /></Div></Body></HTML><Scripttype= "Text/javascript">functionresize_img (pic,w,h) {//Parameters varre_new_size=function(r) {//recalculate widths based on ratios return{w:pic.width/R,h:pic.height/R}; }; varRe_offset=function(n) {//returns the offset based on the new wide height return{off_l: (N.W-W)*0.5, off_t: (N.h-h)*0.5}; }; varre_position=function(o,n) {//Reposition PicturePic.style.cssText="Position:absolute;top:"+-o.off_t+"Px;left:"+-o.off_l+"Px;width:"+N.W+"Px;height:"+N.h+"px;"; }; varExecute=function(rate) {//Total Execution Function varnew_size=re_new_size (rate), offset_new=Re_offset (new_size); Re_position (offset_new,new_size); }; //Judging Variables varRate_of_w=Pic.width/W,Rate_of_h=Pic.height/H,Rate ;if(Rate_of_w>=1){ //picture width greater than display area width if(Rate_of_h>=1){ //and the picture height is greater than the display area height Rate=math.min (rate_of_w,rate_of_h); }Else{ //picture height is less than display area Rate=Pic.height/h; } }Else{ //picture width is less than display area width if(Rate_of_h>=1){ //and the picture height is greater than the display area height Rate=Pic.width/W; }Else{ //picture height less than display area height Rate=math.min (rate_of_w,rate_of_h); }} execute (rate); //Executive Portal }</Script>
JS control image automatically zoom, realize the full box, not deformed, completely in the Bureau
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
