CSS picture Response Vertical Horizontal Center _javascript Tips

I see the recent microblogging popular CSS center technology, I read a few pieces of information to write is not much good, so the time to take the relevant data integration, the specific contents are as follows.

Click here to download the source

Effect Display:

Requirements:

1. Compatible with more browsers as far as possible, this is compatible to IE7,IE6 do not support max-* is not considered.

2. When the browser size changes, the picture is always proportional stretching or scaling.

3. The div that wraps the picture is also responsive, and the size of each div is the same.

4. The picture always remains horizontally vertically centered.

5. The number of the ranks of the picture unchanged, here has always been 3*3.

Let's take care of the requirements below.

Meeting Requirements 1 means that you should try not to use the attributes that are available in advanced browsers, such as what is commonly used in the Advanced Browser center

Display:table-cell;vertical-align;center;
Flexbox
Transform

。。。

If you have to use these properties, you must also have alternatives that are compatible with the lower version of the browser.

It is easy to get the picture of 2 in the response design.

Directly to the picture img{max-width:100%;} It's OK. The outside width even if set to be smaller than the picture width size, the picture will fill the outside Div, at the same time calculates the proportion the picture at this time the height.

You can see the picture size is 640*480 (4:3), the outside Div set to 300px, the picture size becomes 300*225 (4:3).

Then there is the requirement 2 browser size change. This is also easy, the outside Div width written hundred can be.

You can see that no matter how the outside div size changes, the picture's aspect ratio has not changed.

Then there is the requirement 3, the outer div-response.

The first reaction is to set the size to hundred percent. The top effect, for example, has three pictures on one line. The div width of each parcel is set to 33.3%; then Div will be like the picture inside, and so on scale or stretch, div height will be uneven.

<div id= ' wrap ' >
  <ul>
   <li>
    <p></p>
   </li > .....
  </ul>
 </div>

*{
  margin:0;
  padding:0;
 }
 li{
  List-style-type:none;
  Display:inline-block;
  Vertical-align:middle;
  max-width:200px;
  width:32%;
  border:1px solid red;
 img{
  max-width:100%;
  max-height:100%;
  Display:inline-block;
  Vertical-align:middle;
 }
 #wrap {
  max-width:620px;
  font-size:0;
 }

You can see that the first picture has a height of more than 200px, because the first picture is less than the width of the height, it is obvious that this should be the height of the base, width and so on scale. If you add Overflow:hidden to the picture parent element, you can't see the pig's pig's foot.

So what exactly does it take to get the outside div response?

padding-top:100%;

<div id= ' wrap ' >
  <ul>
   <li>
    <div class= ' dummy ' ></div>
   </li>
      ...
  </ul>
 </div>
 
 *{
  margin:0;
  padding:0;
 }
 li{
  List-style-type:none;
  Float:left;
  Display:block;
  max-width:200px;
  width:32%;
  border:1px solid red;
 dummy{
  padding-top:100%;
 }
 #wrap {
  max-width:620px;
  font-size:0;
 }

The ratio of width to height is 1:1, if the ratio is 4:3, it is set to padding-top:75%;

Requirement 3 is buttoned up, below is requirement 4.

Put the pictures in first.

Then let the picture out of the document stream, and the entire picture covered.

 img{
  Position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  max-width:100%;
  max-height:100%;
  Display:block;
  margin:0 Auto;
  BORDER:2PX solid blue;
 

At the same time put the parcel picture div position:relative;

Note that the picture above margin:0 auto, which can be centered horizontally.

Below is only one picture vertically centered, requires 5 only in the outermost div set a max-width can set a row of columns.

There are many ways to center vertically, but the picture here is Position:absolute, and it's easy to think about setting up Margin:auto;padding:auto; You can center the picture that is out of the document stream vertically. See absolute horizontal and Vertical centering in CSS.

However, this method is not valid for IE7. So there's only a layer of div outside the picture.

This cock is a very common way to center vertically.

 <li>
    <div class= "dummy" ></div>
    <p><i></i>< /p>
   </li>
 img{
  max-width:100%;
  max-height:100%;
  Display:inline-block;
  Vertical-align:middle;
 }
 i{
  Display:inline-block;
  Vertical-align:middle;
  height:100%;
 }

Note that at this point the <p> label is set to height:100%. Otherwise, the,<i> tag in IE7 has no height to reference, making it impossible to reach the same height as the outer container.

The above content is in this article for the CSS picture Response Vertical Horizontal Center The whole content, hoped everybody likes.