Setting the width based on the height of its parent
Global problem:
I want to set the width of an element based on the parent's height, I know you can use padding-top
to set the height based on the parent's width, maybe someone knows a trick for my case.
A possible solution (trick) for the Global problem would be to set an element height: 100%
to an element and then rotate(90deg)
, which will simulate that it has a width equal to the parent's height, doesn't fit my case.
Specific problem (it might be possible to do some workaround):
Simplified problem:
I need a dynamic square element with width and height = x, where x = parent's height.
Complete problem:
I need something like this
where x = d / sqrt (2) (Pythagorean theorem)
since you can see that "d" is the height of the parent i am trying to use
.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 height (div.blue)*/
width: 70.9px; /* calc(100% / 1.41) here is my problem because width depends on the parent width and I don't know how to make it depends on the parent height
}
<div class="blue"></div>
Please note that I set fixed width
because I don't know how to do it depends height
ondiv.blue
Here's a jsfiddle example for creating a workaround.
I would be grateful if anyone can help me.
CSS ONLY
source to share
Solution to your specific but not complete problem:
I need a dynamic square element with width and height = x, where x = parent's height.
The dynamic square can be an image and the parent is a div.
<div class="parent-container">
<img class="image" src="{{imageUrl}}" />
</div>
Now for this setup you will give the parent the desired height and tell the element (image) to take it all. Like this:
.parent-container {
height: 400px;
}
.image {
height: 100%;
}
This way, the width doesn't bother you.
Edit
Changing the CSS for this:
.parent-container {
height: 400px;
overflow: hidden;
}
.image {
height: 70.92%;
position: relative;
transform: translate(-50%, 0)rotate(-45deg);
top: 14.4%;
}
Must refer to "Complete Problem".
Please remember that heights and heights are rough calculations and must be re-performed.
Fiddle to download: https://jsfiddle.net/0pok1bf0/
source to share
You can try this with pseudo-elements. However, you still need to set the border width, if not the 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>
source to share
I came up with two practical implementations for your problem. One option requires one additional shell. The other requires two.
Both options allow you to adjust the height and width, albeit in a different way.
For your specific use case, Option 1 is the preferred option.
Option 1
This option only requires one additional wrapper div
. You define values for height
your rectangle and a value width - height
(defined as complement). The width and height of the square are automatically adjusted.
Scenario:
http://jsfiddle.net/w9wgb72e/9/
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 div
s shells . You define values for height
both width
your square and width
your rectangle. The height of the rectangle is automatically adjusted so that the rectangle wraps around the square.
Scenario:
http://jsfiddle.net/w9wgb72e/10/
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>
source to share
Just for kicks and giggles, here's an interesting try that uses 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 screen and resize ... everything scales nicely, almost: P
source to share