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

<div class="ss"></div> 

CSS:

.ss {     width:30%;     height: half of the width; } 

This 30% width scales with screen resolution

Answer 1

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

Answer 2

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.

<div class="parent">    <img class="aspect-ratio" src="images/aspect-ratio.png" />    <div class="content">Content</div> </div> 

CSS

.parent {   position: relative; } .aspect-ratio {   width: 100%;   height: auto; } .content {   position: absolute;   width: 100%;   top: 0; left: 0; }