226

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?

0

5 Answers 5

544

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:

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

18
  • 28
    i have to say this is awesome, and it even work on IE. big +1
    – Peter
    Aug 25, 2012 at 11:03
  • 2
    @IlyaD Take a look at this from the CSS2 specification: little link.
    – Chris
    Aug 25, 2012 at 21:24
  • 8
    You, sir, have won the Internet. This is huge, especially for background images on responsive designs. Thank you! Oct 11, 2013 at 23:27
  • 50
    For the mathematically impaired like me: to calculate the padding-top percentage of something else than 16:9 ratios, use this formula (for example using a 22:5 ratio where 22 is A and 5 is B): B / (A / 100) = C%. So 22:5 is 5 / .22 = 22.72%. Mar 14, 2014 at 13:21
  • 1
    How to set vertically center <div class="main"> from body ? Sep 21, 2015 at 6:42
46

Bumming off Chris's idea, another option is to use pseudo elements so you don't need to use an absolutely positioned internal element.

<style>
.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;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

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:

<style>
.square {
    /* width within the parent (could use vw instead of course) */
    width: 50%;
    /* set aspect ratio */
    height: 50vw;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

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

5
  • 3
    This is fantastic since you don't need a wrapping element. Great work!
    – Jim Buck
    Jul 20, 2016 at 16:17
  • 3
    How can I stop the child content from expanding the height of the parent? Jun 23, 2017 at 17:09
  • I was not able to get this shorter method working in IE10 Sep 28, 2017 at 16:53
  • Yeah this doesn't work if the child can expand the parent.
    – user541686
    Jun 22, 2019 at 22:24
  • Instead of using the clearfix hack you can use display: flow-root or contain: content on the .square element: codepen.io/fcalderan/pen/xxRPwgL Mar 9, 2021 at 9:34
31
<style>
#aspectRatio
{
  position:fixed;
  left:0px;
  top:0px;
  width:60vw;
  height:40vw;
  border:1px solid;
  font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>

The key thing to note here is vw = viewport width, and vh = viewport height

3
  • 2
    Just a note that if the screen's ratio is different, the element's ratio will be different, losing the aspect ratio. Sep 30, 2015 at 1:08
  • 9
    @RyanKilleen except it looks like he is using "vw" for both width and height. So the percentage will still have the same aspect ratio. Oct 1, 2015 at 2:44
  • 1
    @christophercotton .... that's what I get for skimming. You're correct. Oct 1, 2015 at 14:00
3

That's my solution

<div class="main" style="width: 100%;">
    <div class="container">
        <div class="sizing"></div>
        <div class="content"></div>
    </div>
</div>

.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/

2
(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/

4
  • This is great! I am using this script, however, if I use it on multiple DIV's and they each have different heights...once the script kicks in, it adjusts all heights to be the same...I cannot figure out why! Any ideas? I'd like to maintain the aspect ratio like this script does, but maintain the different heights for each. Oct 2, 2013 at 9:52
  • 2
    Because the function applied for a set of elements. The script should handle each element separately. Here is the updated code: jsfiddle.net/QtftX/100
    – onetdev
    Nov 23, 2013 at 10:41
  • If you refresh the page the width and height resets again.. How can you block this?
    – Gilko
    Apr 24, 2014 at 15:05
  • This doesn't work on iOS
    – bryan
    Jun 2, 2014 at 20:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.