Does anyone have any idea how I can get a proportional scaling, both in width and height? I have a DIV container with the following setting:
<style>
#container {
width: 100%;
height:calc(100vw * 1.72);
background:red;
}
</style>
<div id="container"></div>
When I adjust the width of the browser window, the area scales. However, no scaling takes place when I adjust the height of the browser window.
Is there a simple CSS solution to this?
try aspect ratio
width:100%;
aspect-ratio:1;
Please keep in mind that aspect-ratio does not work with all the browsers. Visit Mozilla description about aspect ratio to see the supported browsers
You can proportionally scale an element by giving its child element a padding-top percentage value at the ratio you want. The example below has an element with a height that's 2x its parent's width.
More details on the technique here.
.container {
width: 20%; /* pick whatever width you want */
background-color:red;
}
.container .outer {
width: 100%;
padding-top: 200%; /* defines aspect ratio */
position: relative;
}
.container .outer .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}<div class="container">
<div class="outer">
<div class="inner">Your content</div>
</div>
</div>