var w=$ (". img li i"). width (); Get the width of a picture hosting container
$ (". img li i"). Height (w*0.618); Set the height of the picture hosting container
$ (window). Resize (function () {//* Retrieve the width of the picture's hosting container when the browser window size changes, set its height
var w=$ (". img li i"). width ();
$ (". img li i"). Height (w*0.618);
});
functionimg () {vara=$ ( This). Width (),//Get picture width b=$( This). Height (),//Get picture altitude e=a/b; Calculate aspect ratioif(a>=b) {//If width is greater than heightif(e<1.618{//If the aspect ratio is less than or equal to 1.618 "PS. The golden ratio is 1.618 (width 1.618, height 1) and 0.618 (width 0.618, height 1)", Height exceeds $ ( This). css ({width: "100%", Height: "Auto"}); Make width 100%, ensure width does not leave blank edge/*Center Picture*/ varIMGH = $ ( This). Height (),//get the corresponding picture height at this time IH= $( This). Parent (). Height (),//gets its hosting element's altitude H=-(IMGH-IH)/2; Img-ih is the height of the picture that exceeds the portion of the container that is being loaded ( This). CSS (' margintop ', h)//Set the picture to center vertically in the container}Else{//If the aspect ratio is greater than 1.618, the width exceeds $ ( This). css ({height: "100%", Width: "Auto"}); Make the height 100% display, ensure the height does not leave blank edge/*Center Picture*/ varIMGW = $ ( This). Width (),//Get the corresponding picture width at this time IW= $( This). Parent (). Width (),//Gets the width of its hosting element W=-(IMGW-IW)/2; Imgw-iw the width of the part of the container to which the picture is wider than the width of $ ( This). CSS (' marginleft ', W)//Set the picture to be horizontally centered in the container}}Else{//height greater than width (code with aspect ratio e less than 1.618) $ ( This). css ({width: "100%", Height: "Auto"}); /*Center Picture*/ varIMGH = $ ( This). Height (), IH= $( This). Parent (). Height (), H=-(IMGH-IH)/2; $( This). CSS (' margintop ', h)} }
How pictures are processed in the page