Jquery scales up or down page images

Html code structure:

Copy codeThe Code is as follows:
<A href = ""> </a>
<A href = ""> </a>
<A href = ""> </a>

Style:

Copy codeThe Code is as follows:
A {width: 300px; height: 300px; background: # fff; border: 1px solid #666; display: inline-block}/* specify the height and width of the tag, optional background and border */
Script (jquery can be added by yourself ):

Copy codeThe Code is as follows:
$ (Function (){
Var imgs = $ ('a> img ');
Imgs. each (function (){
Var img = $ (this );
Var width = img. attr ('width'); // area width
Var height = img. attr ('height'); // region height
Var showWidth = width; // The final display width.
Var showHeight = height; // The final display height.
Var ratio = width/height; // width to height
Img. load (function (){
Var imgWidth, imgHeight, imgratio;
$ (''). attr ('src', img. attr ('src'). load (function (){
ImgWidth = this. width; // Actual Image width
ImgHeight = this. height; // The actual height of the image.
ImgRatio = imgWidth/imgHeight; // actual Aspect Ratio
If (ratio> imgRatio ){
ShowWidth = height * imgRatio; // adjust the width too small
Img. attr ('width', showwidth316.css ('margin-left', (width-showWidth)/2 );
} Else {
ShowHeight = width/imgRatio; // adjust the height too small
Img. attr ('height', showHeight).css ('margin-top', (height-showHeight)/2 );
}
});
});
});
});

In this way, the proportional scaling of the image is reduced.