How to automatically resize DIV using CSS while maintaining aspect ratio?

Question

I have a standard HTML form that allows the user to select the Width and Height options (each with values ​​from 1 to 10). When they submit the form, it submits it to a PHP / HTML page where PHP captures the Width and Height variables and assigns the width and height of the DIV to it.

But what I'm trying to do is just use the Width and Height variables to assign the aspect ratio to this DIV, and then to let the DIV automatically resize to 100% of the container it is in, but while keeping that same format.

Example: A user selects a width of 4 and a height of 2, then submits a form. On the PHP host page, this DIV (the one that receives the width-height relationship) is inside the container, 1000px wide and 600px high. So, now the DIV resizes to 1000 pixels wide and 500 pixels high (this will be an aspect ratio of 4 to 2).

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

Aaron

Answer 1

Since the percentage values ​​of padding-* properties are calculated relative to the width of the generated block containing the block, you can:

• Add a dummy element without content, but with a percentage in the vertical indent ( padding-top or padding-bottom ) corresponding to the desired aspect ratio.
• Use absolute positioning to remove all content from the normal element flow to prevent height increase. 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 that a vertical field can be used instead of a vertical fill, but then a crash will occur. To prevent this, 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 the pseudo-element ::before , there is 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> 

Answer 2

You could take advantage of the fact that replacing elements can have an internal aspect ratio. According to spec ,

Otherwise, if "height" has the calculated value "auto", and the element has an internal relationship, then the used value of 'height' is:

(used width) / (internal ratio)

Therefore you could

• Create a replaced element with the desired internal ratio, and then set width:100% for it.
• Use absolute positioning to remove all content from the normal element flow to prevent height increase. Then make it grow to fill the container.

Then the container container will have the required aspect ratio.

The replaced item may be an image. You can create images of the required aspect ratio in PHP or use a third-party web service, for example http://placehold.it/

In the following snippet, I use 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; } 

 <div class="container"> <img src="http://i.stack.imgur.com/Lfmr6.png" /> <div class="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 the <canvas> instead of the image. Thus, you do not need to create images, but it does not work in older browsers (e.g. IE 8 and earlier):

 <div class="container"> <canvas height="1" width="2"></canvas> <div class="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; } 

 <div class="container"> <canvas height="1" width="2"></canvas> <div class="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>