You can use padding-bottom as a way to set height of an element based on its parent width, so that it is proportional with its own width. /* item sized as a square 1/3 size of container */ .item { width: 33.3%; padding-bottom: 33.3%; } If you are using box-sizing: border-box and the element has border, you would expect that element to remain a perfect square. .item { width: 33.3%; padding-bottom: 33.3%; border: 2px solid; } But that’s not the case. Because the height is faked with padding-bot...

Read the original article