In the layout page, sometimes you will encounter large pictures of the page container "burst" situation, especially the loading of external chain pictures (usually through the collection of pictures of the outside station). So this article is going to tell you how to use jquery to zoom in on a picture to fit a large picture to the page layout.
Usually we work with thumbnails using background code (PHP,. NET, Java, etc.) based on large pictures to generate a certain size of the thumbnail, for the front page calls, of course, there is the use of the foreground JavaScript script will be loaded after the large image force scaling, into the so-called thumbnail, this method is not desirable. However, for site content pages, such as the website article details page, if you need to load a large picture, in order to prevent the "burst" layout, we use jquery to scale the picture proportionally. We will tell you two things:
1. Known picture size
Copy Code code as follows:
<div id= "Demo1" >
</div>
When a page loads a picture that contains the attribute width and height values, you can scale it using a few simple jquery code implementations.
Copy Code code as follows:
$ (function () {
var w = $ ("#demo1"). width ();//container widths
$ ("#demo1 img"). each (function () {//If there are many pictures, we can use each () to traverse
var img_w = $ (this). width ();//Picture widths
var Img_h = $ (this). Height ();//Picture Heights
if (img_w>w) {//If the picture is wider than the width of the container-it's going to burst.
var height = (w*img_h)/img_w; Height ratio Scaling
$ (this). css ({"width": w, Height: height})//set width and height after scaling
}
});
});
2. Unknown picture size
When the page load picture size is not known, the above code can not be effectively scaled, this situation more than the current collection of external linked pictures.
Copy Code code as follows:
<div id= "Demo2" >
</div>
Fortunately, a good friend has written a special plug-in to deal with, and across the browser, to solve the front-end friends of a big problem.
Below is a grand introduction to the next autoimg.
Autoimg can quickly adapt to the size of the article image, it uses the browser to get the image file head size data, without waiting for the picture to load complete.
autoimg Compatibility: Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...
Calling the Autoimg plug-in method is fairly straightforward:
Copy Code code as follows:
$ (function () {
$ ("#demo2"). Autoimg ();
});
autoimg instance Download
