Add example of responsive behavior for aspect ratios

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 18b2c192e7e20ec9aea6e0e9a9927e268ed82c95..5ced393519557f7cd86cf005416666b1e34455c8 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -181,6 +181,15 @@
     justify-content: center;
   }
 }
+.bd-example-ratios-breakpoint {
+  .ratio-4x3 {
+    width: 16rem;
+
+    @include media-breakpoint-up(md) {
+      --aspect-ratio: 50%; // 2x1
+    }
+  }
+}
 
 .bd-example-modal {
   background-color: #fafafa;

diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md
index 10ea9bc39c79b377c229f6a7e58329d10dad2136..df24c1c6047d02dbffe8e888ec0df6044d8783f6 100644 (file)
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.0/helpers/ratio.md
@@ -55,6 +55,23 @@ For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ra
 </div>
 {{< /example >}}
 
+This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
+
+{{< highlight scss >}}
+.ratio-4x3 {
+  @include media-breakpoint-up(md) {
+    --aspect-ratio: 50%; // 2x1
+  }
+}
+{{< /highlight >}}
+
+{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}}
+<div class="ratio ratio-4x3">
+  <div class="ratio-item">4x3, then 2x1</div>
+</div>
+{{< /example >}}
+
+
 ## Sass map
 
 Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.