A fixed AspectRatio component

We just put up a new free video where we build an <AspectRatio> component:


Wanted to let everyone on here know about it :slight_smile:

Here’s the code!

import Component from '@ember/component';
import { computed } from '@ember/object';
import { htmlSafe } from '@ember/string';

 Example use:
   <AspectRatio @ratio='16:9'>
     // your content
export default Component.extend({

  tagName: '',

  ratio: null,

  style: computed('ratio', function() {
    let paddingBottom = this.get('ratio')
      .map(str => +str)
      .reduce((prev, curr) => curr / prev);

   return htmlSafe(`padding-bottom: ${paddingBottom * 100}%`);

<div class='relative' style={{style}}>
  <div class='absolute w-full h-full pin'>