How to use:
1. Define the Resizeimg (obj) method
1 functionresizeimg (obj) {2 varBoxheight = $ (". Box"). Height ();3 varBoxwidth = $ (". Box"). width ();4 varImgHeight =$ (obj). Height ();5 varImgWidth =$ (obj). width ();6 if(ImgHeight * boxwidth >= imgwidth *boxheight) {7 //after adjustment, the height exceeds the situation8 varAfterimgheight = Boxwidth * ImgHeight/ImgWidth;9$ (obj). css ("width", boxwidth + "px"). CSS ("height", afterimgheight + "px"));Ten varOffsetTop = (AFTERIMGHEIGHT/2)-(BOXHEIGHT/2); One$ (obj). CSS ("Top", "-" + OffsetTop + "px");//-20px A } - Else { - //after adjustment, the width exceeds the situation the varAfterimgwidth = Boxheight * ImgWidth/imgheight; -$ (obj). css ("height", boxheight + "px"). CSS ("width", afterimgwidth + "px")); - varOffsetleft = (AFTERIMGWIDTH/2)-(BOXWIDTH/2); -$ (obj). css ("left", "-" + offsetleft + "px");//-20px + } -Console.log ("resize OK.")); +}
2. In the IMG tag binding onload event processing method is resizeimg.
onload= "resizeimg(this)"/>
3. Note:
Do not set the width of the picture, high;
Need to set the image positioning properties, position:relative;
Effects such as:
JS script controls the horizontal and vertical center of the picture