/* the width can be px, or %, whatever. */
/* Then the elements inside must be in absolute otherwise it will affect the height.*/
.square {
position: relative;
width: 200px;
background: gold;
}
.square:before{
content: "";
display: block;
padding-top: 100%;
}
All you have to do is to set up the width you want and the the height will be equal no matter what! It saves you the expensive cost of calculating the height with JS.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.