allow ratio handling by element

[LRancez]

Handling the ratio allows you to add the {height} replacement in the images url.
Also, this is specially useful when some smart cropping service is available (like https://github.com/thumbor/thumbor).

• If the data-ratio is not set, this replace the {height} by empty (This maintains the current behavior).
• If the data-ratio is set to a number, the {height} is replace by the proportional height according to the ratio specified.
• if the data-ratio is set to the word "container", the ratio is automatically calculated based on the container size and the {height} is replaced accordingly.

FYI: the bgset plugin clones the attributes, so I added de data-ratio to be cloned also.

[sbehrends]

This looks to be specially useful when using bgset.

[LRancez]

Hi @sbehrends and @aFarkas , thanks for the comments.
I'd uploaded the changes.
Best,

[aFarkas]

thx

[jinty]

We have a similar need and have a patch which pulls out the aspect ratio from the CSS using CSS Custom Variables:

    var elemStyles = window.getComputedStyle(elem);
    var aspectRatio = elemStyles.getPropertyValue('--aspect-ratio') || '';

Would a pull request in that direction be appreciated?

http://caniuse.com/#feat=css-variables

[aFarkas]

@jinty

This is neat. As of browser support I'm not sure.

I normally use the following technique to communicate between CSS -> JS:
https://github.com/boffinHouse/rawblock/blob/gh-pages/sources/components/rb_accordion/_rb_accordion.scss#L17

https://github.com/boffinHouse/rawblock/blob/gh-pages/sources/sass/helpers/_rb_stringify.scss#L57

[aFarkas]

@jinty
Still interested to do the PR? If yes, I would take it.

[jinty]

On Fri, Feb 26, 2016 at 11:46:34PM -0800, Alexander Farkas wrote:

@jinty
Still interested to do the PR? If yes, I would take it.

Just trying to get over a nasty flu first...

Brian Sutherland