Do a picture and so more than the zoom JS

Do a picture and so more than the zoom JSTaro released in view:8447   Today changed the theme of the blog, found that the blog theme in the IE6 under the change, and later found that some of the article in a picture is too big to open the container, resulting in style dislocation, a few days before the company has encountered the need to write a scale and other things, and then to settle it together today. 1. Equal to zoom? Equal to scale is a picture scaled by scale, rather than by the size of the container to scale, which will deform and become ugly, such as the following example: This is the original picture, the size is 200*100:&nbsp, if not proportionally scaled to 100*100:  I now want the effect is such:  on both sides more than two blank, the picture is 100*100, but the contents of the inside is not deformed. 2.OK, there are those needs?  men to their own ruthless point, and then think about where there will be the use of this function! The first requirement is the one shown above, give any image, give a scaled size, and then complete the zoom, the outer layer is a label, so as to show the sense of emptiness and space. The second requirement is that there are many pictures on the page, there are a lot of small, large pictures will affect the aesthetics, this time specify a maximum edge length, if the longest side of a picture is greater than this value, then scale the picture, so that it does not affect the appearance of the page style. All right, let's do this, now. Analysis principle 3. Principle? Picture of the equal than the scale is usually done in the background, the background to complete the work can keep the picture is completely non-distortion and capacity control, but there is no need to control the background of the situation, it is necessary to do some hands and feet at the front desk, but this processing after the picture although the shape of the rules, but may look less clear, Especially with the words of the picture. All processing in this process is processed after the document has been loaded, and it does not have to wait until the image has been downloaded. The DOM is loaded with the source code of some frameworks, and my framework also provides an implementation. After the document is loaded, we take the IMG elements on the page to filter the elements, such as GIF images can not be processed, because GIF is generally not too large, and GIF processing under IE6 is more troublesome, can cause a series of problems. After we get the picture and the size to zoom to, we're going to get to the size of the image, but with the IMG element We don't get these values, we're going to create a new image () based on IMG.SRC. The size of the image can be obtained in its OnLoad event, After getting the size of the picture, the important step is to determine how to scale according to the size and size to be scaled, whether it is scaled according to the width, or scaled according to Takaki.

The following determines whether the picture should be scaled by width or takaki var scale;if (sizev.x/sizev.y> (scale=this.width/this.height)) Usew=false;          else usew=true;  Here is the method in my frame, used to mix the style to an element M.dom.mixinstyle (img,{width: (Usew?sizev.x:sizev.y*scale) + "px",                              height: (usew? SIZEV.X/SCALE:SIZEV.Y) + "px"                                })

The principle is to judge the aspect ratio of the picture and the size of the dimensions to be scaled to the size of the aspect ratio, here say more around the mouth, we think about it, the above variable usew is to scale according to the width, if true, when defining the style of the width is directly to scale the width, height is based on the picture's aspect ratio calculated otherwise the opposite. It's also easy to set up a blank with a label on the outside,

M.dom.mixinstyle ((Wrap=document.createelement ("a")), {                        width:sizev.x+ "px",                        height:sizev.y+ "px",                        Display: "Inline-block",                        textAlign: "Center",                        background: "#ddd"                    });                    if (usew==true) M.dom.mixinstyle (Wrap), {                        height:sizev.x/scale+ "px",                        padding: (sizev.y-sizev.x/scale)/2+ " px 0px "                    });

The principle is similar, depending on the situation to generate a different a tag after we did some processing to put the picture back to its original position: all the code is as follows: (it uses a few of my library functions, you should know, M framework)

        /*** This is a basic method that can modify its behavior * The usual use case is to limit the size of the maximum image in the page, prevent the page from being stretched, the small picture is not processed, the large picture is scaled proportionally, * This method, pass in a scaled size, and then determine the size of the picture, Then, according to the proportions of the picture and the scale to be scaled to the last to achieve equal than scaling to adapt to the outer container * Use cases are: 1. The large picture on the page to reduce processing 2. In a fixed area to put in various proportions of the picture, with JS control their size, and then zoom, so that wide or high school to adapt to the Mgresize:function (Img,sizev) {//first determine if there is no next sibling element, if not, if not, then return to the time insertbefore var next=img                . nextSibling;                var imgsrc=img.src; if (/.*.gif.*/i.test (IMGSRC)) return;                Filtering GIF images, GIF processing can cause some problems, var img_r=new image ();                var Imgsize,usew; Img_r.onload=function () {this.onload=null;//If a GIF image is filtered, you can remove this imgsize=new m.vector (t                    His.width,this.height);                    The following should be judged by the width or Takaki scale picture Var scale,wrap;                    if (sizev.x/sizev.y> (scale=this.width/this.height)) Usew=false;                    else usew=true; M.dom.mixinstyle ((Wrap=document.createelement ("a")), {Width:sizev.x+ "px", height:sizev.y+ "px", display: "Inline-block",                    TextAlign: "Center", Background: "#ddd"}); if (usew==true) M.dom.mixinstyle (Wrap), {height:sizev.x/scale+ "px", padding:                    (Sizev.y-sizev.x/scale)/2+ "px 0px"});                    var P=img.parentnode;                    Wrap.appendchild (P.removechild (IMG)); M.dom.mixinstyle (img,{width: (usew?sizev.x:sizev.y*scale) + "px", Height: (usew                            SIZEV.X/SCALE:SIZEV.Y) + "px"}) try{if (next) {                            Alert ("DD");                        P.insertbefore (Wrap,next);                        }else{p.appendchild (Wrap);        }}catch (e) {}        } img_r.src=imgsrc; }

4. Wait? There seems to be a lack of a demand, yes, the need to reduce the limit of the image is simpler than the above requirements, so no longer repeat, nothing more than to take out from the DOM, create an image based on SRC, and then the onload to adjust the size of the IMG, and then plug it back (note how to plug it back, I have two cases , one is the next sibling node, remember this node, then InsertBefore can, not the next sibling node, then appendchild can be) below there is an effect Demo:demo

Do a picture and so more than the zoom JS