diff options
| author | Mark Otto <markdotto@gmail.com> | 2020-09-23 02:38:58 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2020-09-23 23:30:11 +0300 |
| commit | 73e56404050fc13a5da3bb031fba0980406e7e6c (patch) | |
| tree | de2daa0e021ad71f9366977a8a47c724c49cf7b5 /site/content/docs/5.0/helpers | |
| parent | 3b8c17029f605726bdb65bd277ac142aec0d37ae (diff) | |
Add example of responsive behavior for aspect ratios
Diffstat (limited to 'site/content/docs/5.0/helpers')
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 17 |
1 files changed, 17 insertions, 0 deletions
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 10ea9bc39c..df24c1c604 100644 --- 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. |