Can I scale a div s height proportionally to its width using CSS

Question

Can I set any variable in CSS like I want my div height to always be half of width my div scales with the screen size width for div is in percent   lt div class  ss  gt  lt  div gt    CSS    ss       width 30       height  half of the width      This 30  width scales with screen resolution

User · Answer

You can use the view width to set the height  100 vw is 100  of the width  height  60vw  would make the height 60  of the width

User · Answer

You can do it with the help of padding on a parent item  because relative padding  even height-wise  is based on the width of the parent element   CSS    imageContainer       position  relative      width  25       padding-bottom  25       float  left      height  0     img       width  100       height  100       position  absolute      left  0      This is based on this article  Proportional scaling of responsive boxes using just CSS

User · Answer

For anyone looking for a scalable solution  I wrote a small helper utility in SASS to generate responsive proportional rectangles for different breakpoints  Take a look at SASS Proportions    Hope it helps anybody

User · Answer

This answer is much the same as others except I prefer not to use as many class names  But that s just personal preference  You could argue that using class names on each div is more transparent as declares up front the purpose of the nested divs    lt div id  MyDiv  class  proportional  gt     lt div gt       lt div gt         lt p gt Content lt  p gt       lt  div gt     lt  div gt   lt  div gt    Here s the generic CSS    proportional   position relative     proportional  gt  div  gt  div   position absolute  top 0px  bottom 0px  left 0px  right 0px      Then target the first inner div to set width and height  padding-top       MyDiv  gt  div   width 200px  padding-top 50

User · Answer

You could assign both the width and height of the element using either vw or vh  For example   anyElement       width  20vh      height  20vh     This would set both the width and height to 20  of the browser s current height  retaining the aspect ratio  However  this only works if you want to scale proportionate to the viewport dimensions

User · Answer

Another great way to accomplish this is to use a transparent image with a set aspect ratio   Then set the width of the image to 100  and the height to auto   That unfortunately will push down the original content of the container   So you need to wrap the original content in another div and position it absolutely to the top of the parent div    lt div class  parent  gt      lt img class  aspect-ratio  src  images aspect-ratio png    gt      lt div class  content  gt Content lt  div gt   lt  div gt    CSS   parent     position  relative     aspect-ratio     width  100     height  auto     content     position  absolute    width  100     top  0  left  0

User · Answer

You can use View Width for the  width  and again half of the View Width for the  height   In this way you re guaranteed the correct ratio regardless of the viewport size    lt div class  ss  gt  lt  div gt    ss       width  30vw      height  15vw      Fiddle

User · Answer

One way usefull when you work with images  but can be used as workaround otherwise    lt html gt   lt head gt   lt  head gt   lt style gt       someContainer           width 50           position  relative             par           width  100           background-color red             image           width  100           visibility  hidden             myContent           position absolute         lt  style gt   lt div id  someContainer  gt       lt div id  par  gt           lt div id  myContent  gt               lt p gt              Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum               lt  p gt               lt  div gt           lt img src  yourImage  id  image   gt       lt  div gt   lt  div gt   lt  html gt    To use replace yourImage with your image url  You use image with width   height ratio you desire    div id  myContent  is here as example of workaround where myContent will overlay over image   This works like  Parent div will adopt to the height of image  image height will adopt to width of parent  However image is hidden

User · Answer

If you want vertical sizing proportional to a width set in pixels on an enclosing div  I believe you need an extra element  like so    html   lt div class  ptest  gt       lt div class  ptest-wrap  gt           lt div class  ptest-inner  gt              Put content here          lt  div gt       lt  div gt   lt  div gt    css  ptest     width  200px    position  relative      ptest-wrap       padding-top  60      ptest-inner       position  absolute      top  0      left  0      right  0      bottom  0      background   333      Here s the 2 div solution that doesn t work  Note the 60  vertical padding is proportional to the window width  not the div ptest width   http   jsfiddle net d85FM   Here s the example with the code above  which does work   http   jsfiddle net mmq29

[html] Can I scale a div's height proportionally to its width using CSS?

Examples related to html

Examples related to css