Skip to content

Latest commit

 

History

History
executable file
·
42 lines (29 loc) · 1017 Bytes

README.md

File metadata and controls

executable file
·
42 lines (29 loc) · 1017 Bytes
Raw

Ratio component

If you want an element to scale its height in relation to the width, like a normal image would, you can use the styles of this component. Also known as "flexible responsive media CSS intrinsic ratio scaling technique".

How to use

  1. Install the component using NPM
npm install --save kopfwelt/component-ratio
  1. Import the SCSS mixins and apply them
@import 'node_modules/kopfwelt/component-ratio/component-ratio-mixin';

.Ratio {
	@include aspect-ratio(16,9);
}
.Ratio-inner {
	@include aspect-ratio-inner;
}

Note: the .Ratio and .Ratio-inner classes are examples. You can apply the mixins to any thing.

  1. Use it
<div class="Ratio">
	<img class="Ratio-inner" alt="" />
</div>

<div class="Ratio">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/yJkmHQ2q--I" frameborder="0" allowfullscreen></iframe>
</div>

and presto!

You can put anything inside, not just video. The important part is using two elements: parent and child.