Setting the width depending on the height of its parent

Question

The global problem:

I want to set the width of an element depending on the parent's height, I know that you can use padding-top to set the height depending on the parent's width, maybe someone knows a trick for my case.

A possible solution(trick) to The global problem would be setting height: 100% to the element and then rotate(90deg) that would simulate that it has the width equal to the parent's height but that don't fit my case.

The specific problem ( Maybe it's possible to do some workaround):

Simplified problem:

I want a dynamic square element that has width and height = x where x = parent's height.

---

Full problem:

I want something like this

where x = d / sqrt(2) (Pythagorean theorem)

so as you can see "d" is the parent's height, I try with

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here is my problem  because width depends on the parent's width and I don't know how to make it depends on the parent's height
}

<div class="blue"></div>

Note that I set a fixed width because I don't know how to make it depends on the height of div.blue

Here a jsfiddle example to do some workaround.

I would be grateful if someone could help me.

ONLY CSS

Answer 1

Addressing your specific, yet not full, problem:

I want a dynamic square element that has width and height = x where x = parent's height.

The dynamic square can be an image, and the parent a div.

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

Now for this setup you give the parent a desired height and tell the element (image) to take it all. Like this:

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

This way, the width is not of your concern.

---

Edit

Modifying the CSS to this:

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

Should address the "Full Problem".

Please, mind that the height and top values are rough calculations and should be re-carried out.

The fiddle to boot: https://jsfiddle.net/0pok1bf0/

Answer 2

Just for kicks and giggles, here is an interesting attempt that makes use of vertical percentages (padding), as explained here: http://www.impressivewebs.com/vertical-percentages-css/

.d1 {
 margin-left: 50px;
 width: 50%;
 background-color: #CCCCFF;
 border: solid black 1px;
}

.d2 {
 width: 25%;
 background-color: #FF6666;
 border: solid black 1px;
 padding-top: 25%;
 margin: 5%;
 margin-left: -13%;
 transform: rotateZ(45deg);
}

<div class="d1">
 <div class="d2"></div>
</div>

View full page mode and resize... everything scales nicely, almost :P

Answer 3

You may try this with the pseudo elements. However, you will still need to set the border-width if not height/width.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/752/

CSS:

.box {
    position:relative;
    background-color:#7092BE;
    width:500px;/*sample*/
    height:150px;/*sample*/
    margin:0 auto;
}
.box:before {
    position: absolute;
    content:"";
    right: 100%;
    border-style: solid;
    border-color: transparent #880015 transparent transparent;
    top: 0;
    bottom: 0;
    border-width:75px;
}
.box:after {
    position: absolute;
    content:"";
    left: 0;
    border-style: solid;
    border-color: transparent transparent transparent #880015;
    top: 0;
    bottom: 0;
    border-width:75px;
}

HTML:

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

Answer 4

I've come up with two practical implementations for your problem. One option requires one additional wrapper. The other requires two.

Both options allow you to configure height AND width, albeit in a different way.

For your specific use case, option 1 is the best approach.

Option 1

This option requires only one additional wrapper div. You define the values for the height of your rectangle and the value of width - height (defined as a padding). The width and height of the square are adjusted automatically.

---

The Fiddle :

http://jsfiddle.net/w9wgb72e/9/

The code :

.bluecontainer {
    width: 100px; /* set height of rectangle */
    margin: 8px auto;
    padding-right: 100px; /* this value equals height - width of the rectangle */
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100%;
    margin-left: -49.6%;
    position: relative;
    padding-bottom: 100%;
}

.ratiocontainer:before {
    content: '';
    background: firebrick;
    padding: 35.4%;
    margin: 14.5%;
    float: left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
    </div>
</div>

---

Option 2

This option requires two additional wrapper divs. You define the values for the height and width of your square and the width of your rectangle. The height of the rectangle is automatically adjusted to allow the rectangle to wrap around the square.

The Fiddle :

http://jsfiddle.net/w9wgb72e/10/

The code :

.bluecontainer {
    width: 200px; /* set width of rectangle */
    margin: 8px auto;
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100px; /* set width & height of red square */
}

.stretchy-square {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    margin-left: -50%;
}

.stretchy-square:before {
    content: '';
    background: firebrick;
    margin: 15%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
        <div class="stretchy-square"></div>
    </div>
</div>