Responsively change div size keeping aspect ratio

Question

When I give an image a percent width or height only it will grow shrink keeping its aspect ratio  but if I want the same effect with another element  is it possible at all to tie the width and the height together using percentage

User · Accepted Answer

You can do this using pure CSS  no JavaScript needed  This utilizes the  somewhat counterintuitive  fact that padding-top percentages are relative to the containing block s width  Here s an example    x000D   x000D   wrapper   x000D    width  50   x000D       whatever width you want    x000D    display  inline-block  x000D    position  relative  x000D    x000D   wrapper after   x000D    padding-top  56 25   x000D       16 9 ratio    x000D    display  block  x000D    content      x000D    x000D   main   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    right  0  x000D    left  0  x000D       fill parent    x000D    background-color  deepskyblue  x000D       let s see it     x000D    color  white  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  main  gt  x000D      This is your div with the specified aspect ratio  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt style gt   aspectRatio     position fixed    left 0px    top 0px    width 60vw    height 40vw    border 1px solid    font-size 10vw     lt  style gt   lt body gt   lt div id  aspectRatio  gt Aspect Ratio  lt  div gt   lt  body gt    The key thing to note here is vw   viewport width  and vh   viewport height

User · Answer

That s my solution   lt div class  main  style  width  100    gt       lt div class  container  gt           lt div class  sizing  gt  lt  div gt           lt div class  content  gt  lt  div gt       lt  div gt   lt  div gt    main       width  100      container       width  30       float  right      position  relative     sizing       width  100       padding-bottom  50       visibility  hidden     content       width  100       height  100       background-color  red      position  absolute      margin-top  -50       http   jsfiddle net aG4Fs 3

User · Answer

function            fn keepRatio   function which          var  this     this         var w    this width          var h    this height          var ratio   w h          window  resize function               switch which                  case  width                     var nh    this width     ratio                     this css  height   nh    px                      break                case  height                     var nw    this height     ratio                     this css  width   nw    px                      break                                 jQuery             document  ready function            foo   keepRatio  width          Working example  http   jsfiddle net QtftX 1

User · Answer

Bumming off Chris s idea  another option is to use pseudo elements so you don t need to use an absolutely positioned internal element    lt style gt   square          width within the parent         can be any percentage         width  100      square before       content          float  left          essentially the aspect ratio  100  means the        div will remain 100  as tall as it is wide  or        square in other words          padding-bottom  100        this is a clearfix  you can use whatever    clearfix you usually use  add    overflow hidden to the parent element     or simply float the parent container      square after       content          display  table      clear  both     lt  style gt   lt div class  square  gt     lt h1 gt Square lt  h1 gt     lt p gt This div will maintain its aspect ratio  lt  p gt   lt  div gt    I ve put together a demo here  http   codepen io tcmulder pen iqnDr    EDIT   Now  bumming off of Isaac s idea  it s easier in modern browsers to simply use vw units to force aspect ratio  although I wouldn t also use vh as he does or the aspect ratio will change based on window height    So  this simplifies things    lt style gt   square          width within the parent  could use vw instead of course         width  50          set aspect ratio        height  50vw     lt  style gt   lt div class  square  gt     lt h1 gt Square lt  h1 gt     lt p gt This div will maintain its aspect ratio  lt  p gt   lt  div gt    I ve put together a modified demo here  https   codepen io tcmulder pen MdojRG editors 1100  You could also set max-height  max-width  and or min-height  min-width if you don t want it to grow ridiculously big or small  since it s based on the browser s width now and not the container and will grow shrink indefinitely   Note you can also scale the content inside the element if you set the font size to a vw measurement and all the innards to em measurements  and here s a demo for that  https   codepen io tcmulder pen VBJqLV editors 1100

[html] Responsively change div size keeping aspect ratio

Examples related to html

Examples related to css

Examples related to responsive-design