Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set width according to height [duplicate]

I saw solution for height depending on width: css height same as width. Or here: https://stackoverflow.com/a/6615994/2256981. But my question is opposite.

My element:

<body>
    <div id="square"></div>
</body>

Style for it:

body, html {
    margin: 0;
    height: 100%;
    min-height: 300px;
    position: relative;
}
div#square { /* My square. */
    height: 75%; /* It's height depends on ancestor's height. */
    width: 75vh; /* If supported, preliminarily sets it's width. */
    position: absolute; /* Centers it. */
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    background-color: darkorange; /* Makes it visible. */
}

Script, that keeps it square:

window.onload = window.onresize = function (event) {
    var mySquare = document.getElementById("square");
    mySquare.style.width = mySquare.offsetHeight + 'px';
};

Complete code here: http://jsfiddle.net/je1h/hxkgfr9g/

The question is to make the same thing in pure CSS. No scripting.

like image 971
jevgenij Avatar asked Apr 16 '15 14:04

jevgenij


People also ask

How set dynamic width and height?

Top header with 100% width and 50px height. Left navigation bar with 200px width and dynamic height to fill the screen. A container on the right of the nav bar and under the header with dynamic width and height to fill the screen.

Is width and height same?

The length, width and height are the dimensions of a geometrical figure that depict how long, wide and high a figure is. While length is the longest side of a figure, width is the shorter side and height is the vertical dimension of the figure.

How do I make div width as content?

Using inline-block property: Use display: inline-block property to set a div size according to its content.


1 Answers

There are two techiques I am aware of to keep the aspect ratio of an element according to it's height :

When height is relative to the viewport :

You can use vh units :

div {
  width: 75vh;
  height: 75vh;
  background:darkorange;
}
<div></div>

For a height based on the height of a parent element :

You can use a dummy image that has the aspect ratio you want. Example with a 1:1 aspect ratio you can use a 1*1 transparent .png image or as commented by @vlgalik a 1*1 base64 encoded gif :

html,body{
    height:100%;
    margin:0;
    padding:0;
}
#wrap{
    height:75%;
}
#el{
    display:inline-block;
    height:100%;
    background:darkorange;
}
#el img{
    display:block;
    height:100%;
    width:auto;
}
<div id="wrap">
    <div id="el">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    </div>
</div>

Note that this last demo doesn't update on window resize. But the aspect ratio is kept on page load

UPDATE :
As reported in the comments setting display:inline-flex: on #el seems to solve the updating on window resize problem.

like image 105
web-tiki Avatar answered Nov 15 '22 21:11

web-tiki