how to maintain aspect ratio using CSS?

Hello, I want to maintain an aspect ratio of a div using CSS, I know we can do it with javascript also, but I would like to maintain aspect ratio using CSS only.

Is there any way to change height according to width, maintaining the aspect ratio using any CSS rule or property?



Asked by:- bhanu
: 306 At:- 7/8/2017 11:48:20 AM
CSS CSS3 html responsive-design

1 Answers
profileImage Answered by:- jaya

You can use vw unit to specify width & height, it will make your div aspect ratio using CSS according to the viewport width(vh is used to keep aspect ratio according to viewport height)

1vw : 1%  of the width of the viewport, check here

To keep 1:1 aspect ratio viewport css would be

  width: 25vw;

HTML :  <div></div>

For other aspect ratios, you can use the following table to calculate the value for height according to the width of the element:

aspect ratio  |  multiply width by
     1:1                |         1
     1:3                |         3
     4:3                |        0.75
    16:9              |       0.5625

Check this fiddle example.I hope this works for aspect ratio using css, thanks

At:- 7/8/2017 3:11:28 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use