Fluid web design doesn’t mean you can’t have perfect proportions.
If you’re trying to build a square container, place a 16:9 image, or use any other aspect ratio item, there is a simple way to keep proportions ideal on any screen size.
The key is setting the item size, width and height according to the width of the browser’s viewport.
Use viewport width (vw) units to set the width of your item.
Next, set the height using the vw value in proportion to your design. Not sure about the right measures? If your design is sized in pixels, you can just set the unit of measure to vw, and your element will adjust accordingly.
Don’t forget to set your min and max values to auto, so that they adjust in relation to the viewport.
You can use the same process to build fluid aspect ratio grids by setting the values of the cells to vw.
