How To Auto-resize A Div With Css While Keeping Aspect Ratio?

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 se

Solution 1:

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;
}

<divid="container"><divid="dummy"></div><divid="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;
}

<divid="container"><divid="dummy"></div><divid="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;
}

<divid="container"><divid="element">
    some text
  </div></div>

Solution 2:

You could take advantage of the fact that replaces elements may have an intrinsic aspect ratio. According to the spec,

Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:

(used width) / (intrinsic ratio)

Therefore, you could

• Create a replaced element with the desired intrinsic ratio, and then set width:100% to it.
• 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.

Then, the container container will have the aspect ratio that you want.

The replaced element could be an image. You could create images of the desired aspect ratio in PHP, or using a third party web service like http://placehold.it/

In the following snippet, I use a 2px width and 1px height image ():

.container {
  border: 3px solid blue;
  position: relative;
}
.container > img {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

<divclass="container"><imgsrc="http://i.stack.imgur.com/Lfmr6.png" /><divclass="content"><p>01</p><p>02</p><p>03</p><p>04</p><p>05</p><p>06</p><p>07</p><p>08</p><p>09</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p></div></div>

You can also use a <canvas> element instead of an image. This way you don't need to create images, but it doesn't work on old browsers (like IE 8 and earlier):

<divclass="container"><canvasheight="1"width="2"></canvas><divclass="content">...</div></div>

.container {
  border: 3px solid blue;
  position: relative;
}
.container > canvas {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

<divclass="container"><canvasheight="1"width="2"></canvas><divclass="content"><p>01</p><p>02</p><p>03</p><p>04</p><p>05</p><p>06</p><p>07</p><p>08</p><p>09</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p></div></div>