# Mantaining the aspect ratio with vw unit.

**URL:** <https://forum.kirupa.com/t/mantaining-the-aspect-ratio-with-vw-unit/635599>\
**Category:** web dev\
**Created:** [November 27, 2016, 9:03pm UTC](https://forum.kirupa.com/t/mantaining-the-aspect-ratio-with-vw-unit/635599 "2016-11-27T21:03:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonny\_Silva](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jonny_silva/32/7836_2.png) [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)\
**Post date:** [November 27, 2016, 9:03pm UTC](https://forum.kirupa.com/t/mantaining-the-aspect-ratio-with-vw-unit/635599/1 "2016-11-27T21:03:54Z")

</div>

Hey there ! I’ve been looking into ways to mantain the aspect ratio of my page container, so probably like any of you who did some research on the subject I found this method wich uses `padding-bottom` and takes advantage on the fact that it’s percentage is calculated based on the containing block’s width:

[W3schools Tutorial](http://www.w3schools.com/howto/howto_css_aspect_ratio.asp)

But recently I found out about the `vw - 1% of Viewport Width` and `vh - 1% of Viewport Height` units [[Source](http://www.w3schools.com/cssref/css_units.asp)].

Now I can have access to the width of my container without having to use the padding trick ! So to keep my container on 16:9 aspect ratio all I need to do is:

```
<body>
  <div id="container">

   </div>
</body>

```

If the container width is set to 100%:

```
#container{
  width: 100%;
  height: 56.25vw; //Or 56.25% based on the viewport width. 
  background: tomato;
}

```

Now if the container doesn’t take up all the viewport width you need to take it into account, since vw is based on the viewport not the container.

```
#container{
  width: 80%;
  height: calc(80vw / (16 / 9));/The container width is 80% based on the viewport width or 80vw
  background: tomato;
}

```

PS: I wanted to share the information but I’m not used to writing this articles and my english isn’t good, so feel free to edit the post if you want. Also, if you know about other ways to do it share it in the coments !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 29, 2016, 4:26pm UTC](https://forum.kirupa.com/t/mantaining-the-aspect-ratio-with-vw-unit/635599/2 "2016-11-29T16:26:04Z")

</div>

This is a great post! Thanks for sharing with others 🙂

---

<div class="post-metadata">

**Author:** ![zer00ne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zer00ne/32/7948_2.png) [@zer00ne](https://forum.kirupa.com/u/zer00ne)\
**Post date:** [February 26, 2017, 7:42pm UTC](https://forum.kirupa.com/t/mantaining-the-aspect-ratio-with-vw-unit/635599/3 "2017-02-26T19:42:20Z")

</div>

> [@Jonny\_Silva](#):
>
> height: calc(80vw / (16 / 9));

I’ve never seen 16:9 used in calc before, that’ll be an excellent expression using CSS variables, thanks.