CSS Web page making tips: Image adaptive centering and compatibility processing

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&G t;200, and X>y, displayed in the container of the picture size: Wide =200, high =200y/x

,

when x>200,y>200, and X

when x>200,y>200 and x=y, the size of the picture displayed in the container is: 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.

  

    
   
        /* The background image of the picture/*
		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.
 
       

        

         
        
       
 
/* Table-cell Mode/*
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:200px9; *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.
 
         

          
/* Empty label/*
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.
 
             
  
             
 
/* Set Line Height */
wrap_4 {width:200px; height:200px text-align:center; border:1px solid red; font-family:arial ht: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 expressions _width and _height in IE6, and there are minor 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
 
 
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 expression optimization, cat did a detailed analysis for everyone's reference. For IE6 plus _width:expression (function (EL) {el.style.width = el.offsetwidth > 200? ' 200px ': El.offsetwidth + ' px '; counter (' 2′);} (this)); This sentence.