These questions ask how to maintain the aspect ratio of an element (usualy a div) according to a dynamic width with CSS.
One of them should be chosen as a canonical answer and the others closed as duplicates. I am asking for help to choose which one should be the canonical answer.
Here is a list of the answers I have found (feel free to add others if you find some I have forgotten) with the number of views and upvotes on accepted answer This list is ordered by views :
- Height equal to dynamic width (CSS fluid layout) 118.2k views, 39 UV
- CSS: A way to maintain aspect ratio when resizing a DIV? 55.8k views 220 UV
- Responsively change div size keeping aspect ratio 48.7k views 217 UV
- How to style a div to be a responsive square? 24.2k views, 42 UV
- Pure CSS Solution - Square Elements? 8.2k views, 9 UV
- Make a square when there is a dynamically changing width based on percentage 7.6k views 7 UV
- CSS-only way to set a div to 90% width and 3:1 aspect ratio 2.5k views 1UV
The first thread is clearly the most popular (most views, favorites and votes on answers) but the accepted answer uses jQuery to maintain the aspect ratio whereas this task is ealisy handled with CSS. So it doesn't seem apropriate to be the canonical candidate.
I have answered some of these questions and don't want to decide on my own which could be biased.