Make Height Match Dynamic Width To Create Dynamic Squares CSS

Make Height Match Dynamic Width To Create Dynamic Squares CSS

This is a fix I’ve got running in my image gallery. The height of the image’s are dynamic- the square images would make the boxes square themselves, but during load, their containers height is 0 and you get a really chalky and ugly load staggering. Running a fix in Javascript fires too late, and I don’t want to hide everything until JS can get to it, so CSS is the fix; finding the dynamic width and making that the height:

Found from a thread in stack overflow, I hope this helps someone else:

https://gist.github.com/davidsword/c39ff32da9aa3f256513a7dcc79ff237

Yeah that’s it, a pseudo element can take on the dynamic height based on the dynamic width.


Leave a Reply

Your email address will not be published. Required fields are marked *