How pictures are processed in the page

Source: Internet
Author: User
Tags hosting picture hosting

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.