Give arbitrary elements access to the image/ratio classes

[rjv]

Proposed solution

I often want to make other elements besides images sized to a particular ratio. With this solution, rather than the ratio classes only responding to .image > img, I propose adding a .image > .has-ratio class which can be applied to any element (e.g. <iframe>, <video>, etc).

A practical example would be the following:

<figure class="image is-16by9">
  <iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4?showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>

Tradeoffs

• It relies on the parent element having the .image class, which could be misleading depending on what the child element is.
• We could specify more element selectors (e.g. video, iframe) rather than adding another class, but that would limit its utility and increase the CSS size much more.

Testing Done

I implemented the example described in the proposal to verify it effects all elements with the .has-ratio class the same way it effects img.

[jgthms]

Hey @rjv thanks for your contribution! Can you simply make a PR with the .sass file only? I'll merge it right away.

[ajinkyapisal]

@rjv Do you plan to make suggested changes? I'll be happy to take it further if you are busy

[rjv]

Updated the PR to only include the change to the image.sass file. Thanks @ajinkyapisal for prompting me about this.

[rjv]

@jgthms Could you review this again? I believe we can take the "needs work" label off.