Home Height equal to dynamic width (CSS fluid layout)
Reply: 9

Height equal to dynamic width (CSS fluid layout)

Thomas Norman
1#
Thomas Norman Published in 2011-03-26 21:35:42Z

This question already has an answer here:

  • Maintain the aspect ratio of a div with CSS 17 answers

Is it possible to set same height as width (ratio 1:1)?

Example

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}
chridam
2#
chridam Reply to 2014-12-05 16:05:22Z

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

Zze
3#
Zze Reply to 2017-10-05 05:48:42Z

[Update: Although I discovered this trick independently, I’ve since learned that Thierry Koblentz beat me to it. You can find his 2009 article on A List Apart. Credit where credit is due.]

I know this is an old question, but I encountered a similar problem that I did solve only with CSS. Here is my blog post that discusses the solution. Included in the post is a live example. Code is reposted below.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Kristijan
4#
Kristijan Reply to 2012-11-29 12:28:00Z

There is a way using CSS!

If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

This works well in all major browsers.

craq
5#
craq Reply to 2013-07-12 15:30:32Z

really this belongs as a comment to Nathan's answer, but I'm not allowed to do that yet...
I wanted to maintain the aspect ratio, even if there is too much stuff to fit in the box. His example expands the height, changing the aspect ratio. I found adding

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

to the .element helped. See http://jsfiddle.net/B8FU8/3111/

gion_13
6#
gion_13 Reply to 2014-05-07 12:46:19Z

It is possible without any Javascript :)

This article describes it perfectly - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

The HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

The CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}
Community
7#
Community Reply to 2017-05-23 12:10:29Z

Simple and neet : use vw units for a responsive height/width according to the viewport width.

vw : 1/100th of the width of the viewport. (Source MDN)

DEMO

HTML:

<div></div>

CSS for a 1:1 aspect ratio:

div{
    width:80vw;
    height:80vw; /* same as width */
}

Table to calculate height according to the desired aspect ratio and width of element.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

This technique allows you to :

  • insert any content inside the element without using position:absolute;
  • no unecessary HTML markup (only one element)
  • adapt the elements aspect ratio according to the height of the viewport using vh units
  • you can make a responsive square or other aspect ratio that alway fits in viewport according to the height and width of the viewport (see this answer : Responsive square according to width and height of viewport or this demo)

These units are supported by IE9+ see canIuse for more info

Andy Dickinson
8#
Andy Dickinson Reply to 2014-11-04 06:17:43Z

width: 80vmin; height: 80vmin;

CSS does 80% of the smallest view, height or width

http://caniuse.com/#feat=viewport-units

Salman A
9#
Salman A Reply to 2014-11-26 11:04:30Z

Expanding upon the padding top/bottom technique, it is possible to use a pseudo element to set the height of the element. Use overflow, float and negative margins to remove the pseudo element from the view and flow.

This allows you to place content inside the box without using an extra div and/or CSS positioning.

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Ninjakannon
10#
Ninjakannon Reply to 2016-05-10 15:53:32Z

Extremely simple method jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.358572 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO