Page Picture Center: An adaptive centering method for merchandise pictures

Article Introduction: image Adaptive centering and compatibility processing.

A few days ago in doing Tencent Weibo micro-Mart, encountered the need to do the center of the picture needs. In other words, the pictures in the list of items need to be centered. Because the picture is the seller's own product picture chain to take over, the size of the product picture does not make restrictions and filtering. So what we need to do is to have the picture in the container horizontally centered, vertically centered, and the picture adaptive container size. The image size and size shown in the container have this relationship:

Assuming the container size is 200 pixels *200 pixels, and the picture's width is x pixels high to Y pixels, then:

When x<=200,y<=200, the picture is in the middle of the container, horizontally centered and vertically centered, and the picture displayed in the container is: Wide =x, high =y;

when x>200,y<=200, The size of the picture displayed in the container is: Wide =200, high =200y/x;

when x<=200,y>200, the size of the picture displayed in the container is: Wide =200x/y, high =200;

when x>200,y> 200, and X>y, displayed in the container of the picture size: Wide =200, high =200y/x

,

when x>200,y>200, and X<y, displayed in the container picture size: Wide =200x/y, high =200;

c10> when x>200,y>200, and x=y, displayed in the container of the picture size: Wide =200, high =200;

To better see the effect, first display the original image to compare it to the list container.

X<=200,Y<=200 's Pictures:

X>200,Y<=200 's Pictures:

X<=200,Y>200 's Pictures:

x>200,y>200, and x=y pictures:

The picture Adaptation Center applies the scene to have the commodity list, the album, the search picture result list and so on. How do you use static methods to achieve this effect? Look at some of the online methods, plus some of their own instructions, do a few demo, for you to reference.

using a transparent picture, set the background image on the picture.

This method is suitable for small pictures, that is, the commodity map is smaller than the container , do not need to zoom, loading state pictures can use this method. The limitation of this method is that the product image needs to be filtered on the server side, or it should be scaled down and then displayed in the browser side.

1	<div class="wrap_1"><a href=""><img style="background-image:url(100_100.jpg)" src="wrap_loading.png" alt="" width="200" height="200"></a></div>

1 2 3

/* 图片的背景图方式 */ .wrap_1 { width:200px; height:200px; border:1px solid red; } .wrap_1 img { display:block; background-repeat:no-repeat; background-position:center; }

View Demo

set display to Table-cell

Set two-layer div outside IMG, the outermost div style set to Display:table-cell. Because IE6, 7 Table-cell does not support, so for IE6, 7, set the position to achieve the center. In IE8, if the picture itself is wider than the container, the width of the container will be stretched, using the width 200px for IE8.

1	<div class="wrap_2_outer"><div class="wrap_2_inner"><a href=""><img src="100_100.jpg" alt="" ></a></div></div>

1 2 3 4

/* table-cell方式 */ .wrap_2_outer { border:1px solid red; width:200px; height:200px; display:table-cell; font-size:0; text-align:center; vertical-align:middle; *position:relative;padding:0; overflow:hidden; } .wrap_2_inner { text-align:center; vertical-align:middle; width:200px\9; *width:auto;font-size:0; *position:absolute;*top:50%;*left:50%;} .wrap_2_inner img { max-height:200px; max-width:200px; *position:relative;*bottom:50%;*right:50%;margin:0 auto;}

View Demo

an empty label tied to a picture

Set the height of the empty label so that it is tied to it.

1	<div class="wrap_3"><a href=""><img src="100_100.jpg" alt="" ></a><i></i></div>

1 2 3 4

/* 空标签 */ .wrap_3 { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid red; } .wrap_3 i { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; } .wrap_3 img { vertical-align:middle; max-height:200px; max-width:200px; }

View Demo

set Row height line-height

Set the row height for the picture container to the height of the container.

1	<div class="wrap_4"> <img src="400_300.jpg" alt="" > </div>

1 2 3

/* 设置行高 */ .wrap_4 { width:200px; height:200px; text-align:center; border:1px solid red; font-family: arial; line-height:198px; font-size:0; _font-size:180px; } .wrap_4 img { display:inline-block; vertical-align:middle; max-height:200px; max-width:200px; }

View Demo

The effect of the above implementation is:

IE6 's Cup

For the adaptive image, use Max-width and max-height. The callous reality is that IE6 and the following do not support Max-width and max-height. The above is used to fix max-height,max-width expression _width, _height in IE6, and there are still small problems at run time. Try it with a different picture, for the width and height of at least one value is less than or equal to 200 of the picture, can be perfectly displayed, but Jocquan and high both are greater than 200, there will be some minor problems.

If _width and _height are used together, x>200,y>200, and X>y pictures, will show the ideal state. x>200,y>200, and X<y pictures, appear as 200*200 size, but not scaled proportionally: (.

If _width, _height alone, you can make the corresponding picture to show the ideal state. If you use only _width, you can work with the horizontal graph, which does not work on the vertical graph.

Conversely, if only the use of _height, can work on the vertical map, the horizontal map does not work.

The conclusion is that _width and _height are all written, and this is 95% perfect. In addition to the performance of CSS expressions to do optimization, you can add this sentence zoom:expression (function (EL) {el.style.zoom = "1″; alert (el.tagname);} (this));.

Note: The picture comes from the network.