diff options
| author | Mark Otto <[email protected]> | 2016-11-27 16:31:31 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2016-11-27 16:31:31 -0800 |
| commit | 585516db95c6528c396ef33c59f99c4f8bb8b42e (patch) | |
| tree | 787624c471472fc0615359d946a664d1f50287a5 | |
| parent | 5eddb0b0fdfd7215d5764c5315ce7f0be4ca3d83 (diff) | |
| download | bootstrap-585516db95c6528c396ef33c59f99c4f8bb8b42e.tar.xz bootstrap-585516db95c6528c396ef33c59f99c4f8bb8b42e.zip | |
Add max-width 100% and max-height 100% utilities (#21221)
| -rw-r--r-- | docs/utilities/sizing-and-positioning.md | 14 | ||||
| -rw-r--r-- | scss/utilities/_spacing.scss | 3 |
2 files changed, 16 insertions, 1 deletions
diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 8881b177b..670b6f188 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} -<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%"> +<img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%"> {% endexample %} {% example html %} @@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and ` <div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div> </div> {% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%"> +{% endexample %} + +{% example html %} +<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> + <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div> +</div> +{% endexample %} diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index e7248badb..ff96c58d1 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -3,6 +3,9 @@ .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } + // Margin and Padding .mx-auto { |