Last Updated: November 02, 2017
· netzach23

CSS responsive square (height: width;)

.suqare {
    width: 50%;
    height: 0;
    padding-bottom: 50%;

This will result in a square of 50% height and 50% width.

Unfortunately i didn't found a solution for the other way. (width: height;) If anyone knows a way to do this, pls give me a link or short description. Thank you!

1 Response
Add your response


I'm using this. However, when there's border the percentage might just be wrong.
How can I solve that?

over 1 year ago ·