CSS for wide-height proportional scaling

Using JS to achieve a width adaptive, height changes with the width of the rectangle, I am sure you will. Nothing but JS gets the width of the element, then calculates the height of the corresponding scale, and then assigns the element, but if the requirement is only implemented in CSS.

The HTML code is as follows,

 <  div  class  = ' container '     >  <  div  class  = ' Dummy '  ></ div     >  <  div  class  = ' content '  >  content</ div  >  </ div  >  

The CSS code is as follows,

. Container{Background-color:Silver;width:100%;position:relative;Display:Inline-block;}. Dummy{Margin-top:100%;}. Content{position:Absolute; Left:0; Right:0;Top:0;Bottom:0;}

Effect http://jsfiddle.net/Doing93/9oLqyqha/

Next, we analyze how it is implemented. First, the container container block contains two Div, one is dummy, this is purely to achieve the zoom effect, and another content inside is what we really want to show. In fact, the principle is very simple, we all know that Div is a block element, it is the default is to occupy a row, the width is originally adaptive, so we need to do is to let its height can change with the width. In the premise of not using JS, relying on the previous mentioned dummy that block to achieve, dummy only set a CSS property, margin-top:100%, I believe we all reacted. Because the container width is already there, through the dummy block of the margin-top to the entire height of the same width, when the width of the container changes, the position of the dummy will change, and then the height of the container has changed.

However, there is still a problem-the outer container has a high collapse. And the word "highly collapsed" is certainly not the first time you've heard it, you must have dealt with it. Because the child element floats causing the parent element to collapse highly, the method used here is similar to clearing the floating method, setting the parent element Display:inline-block or Overflow:hidden. Here is a digression, do not know everyone in the use of these two methods to clear the floating when there is no doubt, why to the parent element so set up to be able to put the parent element height up, accurate explanation of the principle is a bit complex. It is easy to understand that when a child element is out of the flow of a document, the parent element does not know that the child element exists, so it causes a high collapse. When the parent element is set to Display:inline-block or Overflow:hidden, the parent element is forced to check which child elements are inside, and this time the child element that was positioned before absolute is found, so the height is open.

Here to dummy block set margin-top:100%, come out is a self-adaptive scaling square, if you need to change this value rectangle, such as need 4:3 of the rectangle, it should be set to margin-top:75%.

CSS for wide-height proportional scaling