CSS equal to zoom out

This effect requires that the height of each item element is twice times the width, we first set the width of the parent element box 100%, where we mainly use a property of padding to solve the problem, because the width of the padding if the percentage of the calculation

So its actual value is relative to the width of the parent element to calculate the value of the percentage, including Padding-bottom and padding-top, so we can set the width here to 40%. Since we have box width of 100%, and the height is not told, so can not set the height value directly to achieve the effect, I can use Padding-bottom to replace the height value, as shown above, the height is set to 0, and the Padding-bottom set to 80% , so we can see the effect, you can drag and drop the browser window size, are equal to the column zoom out of the Oh this is also an adaptive screen a small way bar.

HTML code

The code is as follows
<div class= "box" > <div class= "item" ></div> <div class= "item" ></div> <div class= "item "></div> <div class=" item "></div> </div>

CSS Code

code is as follows	&nbs P;
. item {width:40%; height:0; padding-bottom:80%; background-color : #f00; Float:left; margin:10px 5px;; }