Add arbitrary ratio docs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab7f2915037a697ec6d2e42d37e3a84f5db8997a..eb48f28373466db3c9a28df3988baaf71b11b51c 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 * Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
 * Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
 
+### New features
+
+* #2563 `.image` has a new `.is-fullwidth` modifier
+
 ## 0.7.5
 
 ### Deprecation warning

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index e160155f4585ec171cf6767c2975a2fe7c96ae65..ddb44d840a915bb71713c664524d0dadab0ab016 100644 (file)
--- a/docs/documentation/elements/image.html
+++ b/docs/documentation/elements/image.html
@@ -40,6 +40,12 @@ meta:
 </figure>
 {% endcapture %}
 
+{% capture iframe_ratio %}
+<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>
+{% endcapture %}
+
 <div class="content">
   <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
 </div>
@@ -172,11 +178,23 @@ meta:
 </table>
 
 <div class="content">
-  <p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
+  <p>The <code>.image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
+  <br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
 </div>
 
 {% include elements/anchor.html name="Arbitrary ratios with any element" %}
 
 {% include elements/new-tag.html version="0.7.4" %}
 
+<div class="content">
+  <p>
+    You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>.has-ratio</code> modifier to a resizable element.
+  </p>
+  <p>
+    For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.
+  </p>
+</div>
+
+{% include elements/snippet.html content=iframe_ratio horizontal=true %}
+
 {% include elements/variables.html type='element' %}