How to make height relative to width

Question

I want to make my height depending on the width, The smaller the width, the higher the height as in keeping a constant surface area of the element. How can I achieve that using only CSS?

height: calc(???)

None of the answer of Maintain the aspect ratio of a div with CSS is answering my question. I don't need it to have a constant aspect ratio but a constant surface area.

score 0 · Answer 1 · answered Dec 06 '18 at 08:29

0

Here height automatically becomes half of the width. --box-width:300px and /2 changeable.

:root {
  --box-width: 300px;
}

.box {
  width:var(--box-width);
  height:calc(var(--box-width)/2);
  background:pink;
}

<div class="box"></div>

answered Dec 06 '18 at 08:29

doğukan

23,073
13
57
69

I don't want to have a fixed width variable. – kpda806G Dec 06 '18 at 08:35
then use vw or % – doğukan Dec 06 '18 at 08:36
`height: calc(20vw / 2);` it has opposite effect – kpda806G Dec 06 '18 at 08:39
this is working: https://codepen.io/dgknca/pen/rQEgoV i don't understand you what the want. – doğukan Dec 06 '18 at 08:42
what I want is the pink box's height will keep expand when sizing down the window's width. (smaller the width = higher the height and vise versa) – kpda806G Dec 06 '18 at 08:49

How to make height relative to width

1 Answers1