Container scaling with proportional size (width/height)

Question

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?

Are you sure you want to use vw in you height? vw = viewport width. vh = viewport height. So in your example, the container height is not linked to viewport height in any way. — Shrimp, Sep 21 '21 at 10:02
Yes exactly, if you want your height to be affected by a change in the height of the browser window you'd need your calculation to use `vh` — dave, Sep 21 '21 at 10:03
I was trying to do it like this: `height:calc(100vw * 1.72); width:calc(100vh * 1.72); ` But I couldn't reach an scaling effect. — Filip, Sep 21 '21 at 10:04
Can you post a working snippet? Seems like you switched vh and vw. Or do you want the `width` to change when your browser `height` changes? — Shrimp, Sep 21 '21 at 10:06
Yes exactly. I would like to change the width, based on the hight. So I always get an porportional scaling. (1:2) — Filip, Sep 21 '21 at 10:15

score 0 · Answer 1 · answered Sep 21 '21 at 10:03

0

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

answered Sep 21 '21 at 10:03

Muhammad Mutti Ur Rehman

74
7

dave · Answer 2 · 2021-09-21T10:24:15.597

0

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>

edited Sep 21 '21 at 10:24

answered Sep 21 '21 at 10:18

dave

2,750
1
14
22

Thanks you for your snippet. But in my case, the height of the red container have scale as well, when I change the height of the browser . Aim is, that I don't have to scroll the Content, if the height of the Browser is arround 250px. – Filip Sep 21 '21 at 10:47

Container scaling with proportional size (width/height)

2 Answers2