diff --git a/CHANGELOG.md b/CHANGELOG.md index ab7f2915..eb48f283 100644 --- 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 e160155f..ddb44d84 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -40,6 +40,12 @@ meta: {% endcapture %} +{% capture iframe_ratio %} +
+ +
+{% endcapture %} +

Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

@@ -172,11 +178,23 @@ meta:
-

The .image container will take up the whole width while maintaining the perfect ratio.

+

The .image container will usually take up the whole width while maintaining the perfect ratio. +
If it doesn't, you can force it by appending the is-fullwidth modifier.

{% include elements/anchor.html name="Arbitrary ratios with any element" %} {% include elements/new-tag.html version="0.7.4" %} +
+

+ You can apply a specific ratio on any element other than an img, simply by applying the .has-ratio modifier to a resizable element. +

+

+ For example, you can apply a 16by9 ratio on an iframe. Resize the browser, and you'll see how the ratio is maintained. +

+
+ +{% include elements/snippet.html content=iframe_ratio horizontal=true %} + {% include elements/variables.html type='element' %}