jquery implements the function of zooming in and out of page images in equal proportions_jquery

html code structure:

Copy code The code is as follows:

Style:

Copy code The code is as follows:

a{width:300px;height:300px;background: #fff;border:1px solid #666;display:inline-block} /* Here you need to specify the height and width of the a tag, the background and border are optional*/
Script (jquery can be added by yourself):

Copy code The 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;//Final display width
var showHeight = height;//Final display height
var ratio = width / height;//Aspect ratio
img.load(function () {
var imgWidth, imgHeight, imgratio;
$('').attr('src ', img.attr('src')).load(function () {
imgWidth = this.width;//The actual width of the picture
imgHeight = this.height;//The actual height of the picture
imgRatio = imgWidth / imgHeight;//Actual aspect ratio
if (ratio > imgRatio) {
showWidth = height * imgRatio;//Adjusted width is too small
img.attr('width', showWidth) .css('margin-left', (width - showWidth) / 2);
                                                                                                     .attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
                                                                                       . >


In this way, the image is enlarged and reduced in equal proportions.