Use the `aspect-ratio` property.

[peiche]

The aspect-ratio property has support across all major browsers. Since CodyFrame v3 has dropped support for IE, I propose it adopts proper aspect ratio implementation, as opposed to the padding hack. Cheers!

[sebastiano-guerriero]

Hi Paul, we're still looking into this because 1. support is not that great yet (e.g., aspect-ratio is not supported in iOS < v15, which is about 10% according to caniuse), and 2. it would be great if the new classes are somehow 'compatible' with the old ones - not sure if possible. Anyway, this is def on our radar 👍

[peiche]

Hi @sebastiano-guerriero, thanks for the feedback. I just added the fallback again for browsers that don't support the property natively. (Props to CSS Tricks for providing the @supports logic.)

[sebastiano-guerriero]

Hi @peiche! I've run many tests based on your suggestion. Here are the results:

• the aspect-ratio CSS property is quite smart, and it's not possible to provide a real fallback right now. The method described in the CSS Tricks article, for example, wouldn't work if you apply the utility class to an image or any other element that can't have pseudo elements (while the CSS aspect-ratio property can be used on images etc.).
• the current implementation requires to use the .aspect-ratio-{ratio} class on the parent of an image/video/iframe. Hence the new, proposed implementation would cause a breaking change.
• the only way to create utility classes based on the aspect-ratio property is to use them in projects where support for older browsers is not needed. E.g., you can create custom ratio classes in your 'custom-style/_util.scss' CodyFrame file:

  .ratio-16\:9 { aspect-ratio: 16/9; }
  .ratio-3\:2  { aspect-ratio: 3/2; }
  .ratio-4\:3  { aspect-ratio: 4/3; }
  .ratio-5\:4  { aspect-ratio: 5/4; }
  .ratio-1\:1  { aspect-ratio: 1/1; }
  .ratio-4\:5  { aspect-ratio: 4/5; }
  .ratio-3\:4  { aspect-ratio: 3/4; }
  .ratio-2\:3  { aspect-ratio: 2/3; }
  .ratio-9\:16 { aspect-ratio: 9/16; }

In the future, probably the best approach would be renaming the current classes to something like .media-wrapper-{ratio} and use the aspect-ratio property for the `.aspect-ratio-{ratio}' classes - with no fallback.

Any feedback is welcome.