Because the image scaling function is used, many images can be found on the Internet, but there are too many places that cannot be used.
So I wrote a jquery image scaling plug-in for myself. My English is too bad, so I just found a word to name it.
(Function ($) {<br/> $. FN. scaleimage = function (settings) {<br/> Settings = $. extend ($. FN. scaleimage. defaults, settings); <br/> return this. each (function () {<br/> $. FN. scaleimage. resizeimage ($ (this), settings); <br/>}); <br/>}; <br/> $. FN. scaleimage. resizeimage = function ($ this, settings) {<br/> var scalew = $ this. width ()/settings. width; <br/> var scaleh = $ this. height ()/settings. height; <br/> VaR scale = scalew> scaleh? Scalew: scaleh; <br/> $ this. width (parseint ($ this. width ()/scale); <br/> var parent = $ this. parent (); <br/> var marginleft = settings. marginleft; <br/> var margintop = settings. margintop; <br/> If (parent. ATTR ("tagname ")! = "Body") <br/>{< br/> marginleft = NULL? Parseint (parent. Width ()-$ this. Width ()/2): marginleft; <br/> margintop = NULL? Parseint (parent. height ()-$ this. height ()/2): margintop; <br/>}< br/> export this.css ({<br/> "margin-left": marginleft, <br/> "margin-top": margintop, <br/> "float": "Left" // it is best to write it into CSS <br/> }); <br/>}; <br/> $. FN. scaleimage. defaults = {<br/> width: 200, <br/> Height: 200, <br/> marginleft: NULL, <br/> margintop: NULL <br/> }; <br/>}) (jquery );
example:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> demo </title> <br/> <MCE: script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js "mce_src =" http://ajax.googleapis.c OM/ajax/libs/jquery/1.4.3/jquery. min. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <MCE: script src =" jquery. scaleimage. JS "mce_src =" jquery. scaleimage. JS "type =" text/JavaScript "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> $ (function () {<br/> $ (". demo "). scaleimage ({<br/> width: 100, <br/> Height: 350 <br/>}); <br/> }); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Div style = "width: 300px; Height: 400px; float: Left; Border: 1px solid #000000; "> </div> <br/> </body> <br/> </ptml> <br/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
