Geek Answers Handbook

Set width according to height

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

My item:

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

Style for him:

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

Script that saves it squared:

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

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

The question is to do the same in pure CSS. There are no scripts.

+7
css aspect-ratio
source share
2 answers

There are two techniques that I know of in order to maintain the aspect ratio of an element depending on its height:

When the height relative to the viewport :

You can use vh units:

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

For heights based on the height of the parent :

You can use a fictitious image with the desired aspect ratio. An example with an aspect ratio of 1: 1 you can use a transparent .png image 1 * 1 or as a comment @vlgalik 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>

Please note that this last demo is not updated when the window is resized. But aspect ratio is saved on the page

UPDATE:
As indicated in the comment settings display:inline-flex: on #el seems to solve the update problem when the window is resized.

+5
source share

Edit: skipped that you want to set the width depending on the height, this does the opposite: (

To maintain all relationships, you can use padding-bottom . The percentages at the bottom of the base always refer to the width of the element:

 /* the wrapper has a width */ .wrapper { position: relative; width: 25%; margin-bottom: 10px; } /* these elements set the height (using padding-bottom) */ .square { padding-bottom: 100%; position: relative; } .widescreen { padding-bottom: 56.25%; /* 9/16 = 0.5625 */ } /* * This is the content. * Needs position:absolute to not add to the width of the parent */ .content { /* fill parent */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; /* visual */ padding: 10px; background: orange; color: white; } 
 <div class="wrapper"> <div class="square"> <div class="content">square</div> </div> </div> <div class="wrapper"> <div class="widescreen"> <div class="content">16:9 ratio</div> </div> </div>

The only drawback is that you need a group of shell elements.

0
source share

More articles:


All Articles