How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?


Tags: php,html,css,forms,autoresize

Problem :

What I have is a standard form in HTML that allows the user to select a "Width" option and a "Height" option (each with values ranging from 1 to 10). When they send the form, it sends it to a PHP/HTML page where PHP grabs the "Width" and "Height" variables and assigns it to a width and height of a DIV.

But what I'm trying to do is just use the "Width" and "Height" variables to assign an aspect ratio to that DIV, and then have that DIV auto-resize to 100% of the container it is inside, but while keeping that same aspect ratio.

Example: User selects a Width of 4 and a Height of 2, then sends the form. On the receiving PHP page, that DIV (the one receiving the width and height ratios) is inside a container that's 1000px width and 600px height. So now, that DIV resizes to 1000px wide and 500px tall (that would be the aspect ratio of 4 to 2)

Any ideas, codes, scripts would be extremely helpful, thank you very much!

Aaron



Solution :

Since percentage values of the padding-* properties are calculated with respect to the width of the generated box's containing block, you could:

  • Add a dummy element with no content but with a percentage in a vertical padding (padding-top or padding-bottom), corresponding to the desired aspect ratio.
  • Use absolutely positioning to remove all contents from the normal flow of the element, in order to prevent them from increasing the height. Then, make it grow to fill the container.

This idea is taken from http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

#container {
  position: relative;
  width: 50%;
}
#dummy {
  padding-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Note vertical margin could be used instead of vertical padding, but then there would be margin collapse. To prevent it, add

#container {
  display: inline-block;
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}
#dummy {
  margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Using ::before pseudo element, there's no need to use a dummy element:

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}

#container {
  position: relative;
  width: 50%;
}
#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="element">
    some text
  </div>
</div>


    CSS Howto..

    How not to mess up styling when using css frameworks

    How can I apply jQuery .css style to descendant div [closed]

    how to use auto with a height in css

    How to use CSS to vertically center a form in a div

    How to change margin according to other elements?

    How to edit jquery slider

    how can i create true loop?

    How to have an asp.net ajax control automatically reference css files

    How do you make these div elements display correctly?

    jquery - how to change the display css attribute of a button within a li on hover

    CSS - how to get position: absolute; to work well with different screen sizes

    How do I make :hover inside div style? [duplicate]

    how to achieve following using css ( digits input )

    How do I require main.css.erb in application.css

    How to get these tables stacked on top of each other?

    How to make text-overflow with ellipsis work with long strings that have no breaks

    CSS/HTML : how to make something become absolute positioned once you scroll by it

    How to put a
  • over an
    • How do I get MS Outlook to accept the CSS style display:block?

      How to centre and make responsive a row of divs

      How to center a single character both vertically and horizontally in a square div

      How can I “display:none” to some adjacent text with CSS?

      How to customize qTip2 css?

      How to make rails load multiple css files

      How to Load Resources (Css, js files) in Laravel 4 (Optimization)

      How to have two elements with scrollbars next to each other?

      How to use the .css function with jQuery

      CSS: How to fix the width of a vertical menu?

      How to create a responsive sprite sheet animation in css?

      How to slide down to show content of DIV using CSS/jQuery?