14

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 :

  1. Height equal to dynamic width (CSS fluid layout) 118.2k views, 39 UV
  2. CSS: A way to maintain aspect ratio when resizing a DIV? 55.8k views 220 UV
  3. Responsively change div size keeping aspect ratio 48.7k views 217 UV
  4. How to style a div to be a responsive square? 24.2k views, 42 UV
  5. Pure CSS Solution - Square Elements? 8.2k views, 9 UV
  6. Make a square when there is a dynamically changing width based on percentage 7.6k views 7 UV
  7. 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.

6

2 Answers 2

2

I took the liberty to closed the other questions as a duplicate of question number two.

As you pointed out, the first question was definitely the most popular, but I feel that the accepted jQuery answer was misleading. Question number two was actually the oldest (although that technically doesn't matter), and it offered good, comprehensive answers.

Based on the upvotes, your viewport units answer on question two had more visibility than your similar answer on question one, which indicates that question two is likely the better canonical question going forward.

If anyone disagrees, please feel free to revert my close votes.

0

My vote would be to use this question: Responsively change div size keeping aspect ratio (48k views, 73 UV, 55 favorites)

The chosen answer does not require the use of additional elements and explains why it works. It is also the oldest answer among any of those links that uses pseudo elements (Aug 25 '12). On top of that, it is the #1 result for "css div aspect ratio" on Google for me.

To close this question as a duplicate of any of those others is, quite frankly, an insult to that answer.

1
  • 2
    You definetly made a point about the explanation and link to w3.org reference. I edited the answer of question 2 to add that explanation and link to reference. But I don't see why using a pseudo element for this issue is relevant as the same result is achievable without it and with shorter code.
    – web-tiki
    Apr 21, 2015 at 10:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .