How to make a percentage height of a div relative to its percent width with css?

Question

I'm trying to make a layout where my div's height is dependent to its width. Is this possible with CSS? So far I haven't been able able to get it right. This might be easy I don't know; my strong suit is not CSS. Some help is appreciated.

Here is what I have:

body{
   margin: 0;
   box-sizing: border-box;
}
.mainContainer{
   background-color: lightblue;
   display: flex;
   flex-wrap: wrap;
}
.cover{
   display: inline-block;
   width: calc(100%/3); /*this sets the divs widths to be a third of the screen */
   /* height: ????; <--- Here is the issue how to set this so that it is 130% of whatever the computed width is? */
}

<div class="mainContainer">
   <div class="cover" style="background-color: red;">Cover 1 Here</div>
   <div class="cover" style="background-color: blue;">Cover 2 Here</div>
   <div class="cover" style="background-color: green;">Cover 3 Here</div>
   <div class="cover" style="background-color: yellow;">Cover 4 Here</div>
</div>

Does this answers your question? [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/q/1495407/104380) — vsync, Jul 19 '20 at 19:18
You can use `vw` (view width) units. Something like `height: calc((100vw/3)*130);` — jbutler483, Jul 19 '20 at 19:30

score 1 · Accepted Answer · edited Jul 19 '20 at 21:18

If I understand the question correctly and if you don't mind adding one more DIV, here's my suggestion:

body{
   margin: 0;
   box-sizing: border-box;
}
.mainContainer{
   background-color: lightblue;
   display: flex;
   flex-wrap: wrap;
}
.cover{
   display: inline-block;
   width: calc(100%/3);
}
.container{
    display: block;
    overflow: hidden;
    width: 100%;
    padding-bottom: 130%;
}

<body>
<div class="mainContainer">
  <div class="cover" style="background-color: red;">
    <div class="container">Cover 1 Here</div>
  </div>
  <div class="cover" style="background-color: blue;">
    <div class="container">Cover 2 Here</div>
  </div>
  <div class="cover" style="background-color: green;">
    <div class="container">Cover 3 Here</div>
  </div>
  <div class="cover" style="background-color: yellow;">
    <div class="container">Cover 4 Here</div>
  </div>
</div>
</body>

Abdelmonaem Shahat · Answer 2 · 2020-07-20T00:17:44.013

0

use aspect ratio technique like this:

:root {
  --unit: calc(100% /3)
}
body{
   margin: 0;
   box-sizing: border-box;
}
.mainContainer{
   background-color: lightblue;
   display: flex;
   flex-wrap: wrap;
}
.cover{
   display: inline-block;
   width: var(--unit);
}
.container {
  height: 0;
   padding-top: 130%;
   width: 130%;
}

edited Jul 20 '20 at 00:17

answered Jul 19 '20 at 19:38

Abdelmonaem Shahat

532
2
6

It doesn't seem to work. Only makes each div 130% larger than the whole screen size but I only need the div to be 130% larger than its own width :( – xelfury Jul 19 '20 at 19:46
yes you are right I made a mistake I should add the aspect-ratio to the inner div I will update my solution a little. – Abdelmonaem Shahat Jul 20 '20 at 00:16

How to make a percentage height of a div relative to its percent width with css?

2 Answers2