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 and 10 years for Computer Rock (former Spoiled Milk). Now I am working on developing industry leading subscription management system as a part of Plenigo team since August 2021.
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