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;
}
<div class="container">
<img src="https://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 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):
<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>