CSS: Height equal to dynamic width

There is a way using CSS!

If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

This works well in all major browsers.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Credit to Kristijan for this answer.

By Aleksandar Jakovljević

My name is Aleksandar Jakovljević and I am a web developer from Belgrade, Serbia. I was born in Smederevo, in 1980. I started focusing on web development since late 2003. I am mostly focused on open source web technologies. I specialised in PHP, focusing on Symfony framework, with skills in Drupal and WordPress, too. I worked more than 7 years for art_net studio. I work for Computer Rock (former Spoiled Milk) since April 2011. I love the web and everything related to it. The possibility to publish your ideas quickly and make them available to the entire world is what made me decide to pursue a career in web development.

Follow on: Twitter | GitHub | LinkedIn | Facebook | Instagram

Hire me on Upwork

Leave a comment

Your email address will not be published.