Page 1 of 1
CSS fluid layout - Height equal to dynamic width
Posted: 06 Jan 2015, 08:40
by MarPlo
Hello,
Is it possible to set same height as width (ratio 1:1) for a html element with dynamic /fluid width, using css?
HTML:
Code: Select all
<div id="parent">
<div id="child">width 80%, height equal to width</div>
</div>
CSS:
Code: Select all
#child {
width: 80%;
height: same-as-width;
}
CSS fluid layout - Height equal to dynamic width
Posted: 06 Jan 2015, 09:25
by Admin
Simple and neet : use
vw units (viewport units) for a responsive height/width according to the viewport width.
In this example, CSS does 80% of the smallest view, height or width, according to viewport.
Code: Select all
div {
width: 80vmin;
height: 80vmin;
}
This technique allows you to adapt the elements aspect ratio according to the height of the viewport using "vw" units.
Another example:
CSS - HTML:
Code: Select all
<style>
#parent {
width:40vw; /* <-- 40% of window width */
height:80vw; /* <-- 2 x width (1:2 aspect ratio) */
margin:0 auto;
background:gold;
}
#parent #child {
width:25vw; /* <-- 25% of window width */
height:25vw; /* <-- same as width (1:1 aspect ratio) */
margin:1em auto;
background:red;
}
</style>
<div id="parent">40% of window width. Height 1:2 aspect ratio.
<div id="child">25% of window width. Height 1:1 aspect ratio</div>
</div>
- Note: "vw" units are according to the viewport (window) size.
Another way, using a css trick with pseudo-class.
Code: Select all
<style>
#box {
position: relative;
width: 50%; /* desired width */
}
#box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1 */
}
#box #content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background:blue;
}
</style>
<div id="box">
<div id="content">content ...</div>
</div>