A fixed AspectRatio component

1

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

https://embermap.com/video/let-s-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
   </AspectRatio>
*/
export default Component.extend({

  tagName: '',

  ratio: null,

  style: computed('ratio', function() {
    let paddingBottom = this.get('ratio')
      .split(':')
      .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'>
    {{yield}}
  </div>
</div>
3 Likes