Height equal to dynamic width CSS fluid layout

Question

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

User · Accepted Answer

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

User · Answer

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   x000D   x000D   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       x000D   lt div id  container  gt     lt div id  dummy  gt  lt  div gt     lt div id  element  gt      some text    lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div gt  lt  div gt    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

User · Answer

It is possible without any Javascript    The HTML   lt div class  box  gt       lt div class  content  gt Aspect ratio of 1 1 lt  div gt   lt  div gt    The CSS   box       position  relative      width     50      desired width        box before       content       quot  quot       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  quot box quot  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

User · Answer

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

User · Answer

Extremely simple method jsfiddle  HTML   lt div id  container  gt       lt div id  element  gt          some text      lt  div gt   lt  div gt    CSS   container       width  50      desired width        element       height  0      padding-bottom  100

User · Answer

width  80vmin  height  80vmin   CSS does 80  of the smallest view  height or width  http   caniuse com  feat viewport-units

User · Answer

Expanding upon the padding top bottom technique  it is possible to use a pseudo element to set the height of the element  Use float and negative margins to remove the pseudo element from the flow and view   This allows you to place content inside the box without using an extra div and or CSS positioning    x000D   x000D   fixed-ar  before   x000D    content      x000D    float  left  x000D    width  1px  x000D    margin-left  -1px  x000D    x000D   fixed-ar  after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   x000D   x000D     proportions    x000D   x000D   fixed-ar-1-1  before   x000D    padding-top  100   x000D    x000D   fixed-ar-4-3  before   x000D    padding-top  75   x000D    x000D   fixed-ar-16-9  before   x000D    padding-top  56 25   x000D    x000D   x000D   x000D     demo    x000D   x000D   fixed-ar   x000D    margin  1em 0  x000D    max-width  400px  x000D    background   EEE url https   lorempixel com 800 450 food 5   center no-repeat  x000D    background-size  contain  x000D    x000D   lt div class  fixed-ar fixed-ar-1-1  gt 1 1 Aspect Ratio lt  div gt  x000D   lt div class  fixed-ar fixed-ar-4-3  gt 4 3 Aspect Ratio lt  div gt  x000D   lt div class  fixed-ar fixed-ar-16-9  gt 16 9 Aspect Ratio lt  div gt  x000D   x000D   x000D

User · Answer

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   JSFiddle  https   jsfiddle net ayb9nzj3

[javascript] Height equal to dynamic width (CSS fluid layout)

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to responsive-design