From 6d23e97baad4a503b752cb8b660ef34bfccb4f42 Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 27 Feb 2018 18:45:26 +1000 Subject: [PATCH] Add constant-width-to-height-ratio snippet --- index.html | 35 +++++++++++++++++ snippets/constant-width-to-height-ratio.md | 45 ++++++++++++++++++++++ 2 files changed, 80 insertions(+) create mode 100644 snippets/constant-width-to-height-ratio.md diff --git a/index.html b/index.html index 84106a7fd..da9624dbc 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@
Clearfix + Constant width to height ratio Custom text selection Easing variables Etched text @@ -99,6 +100,40 @@

✅ No caveats.

+
+

Constant width to height ratio

+

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

+

HTML

<div class="constant-width-to-height-ratio"></div>
+
+

CSS

.constant-width-to-height-ratio {
+  background: #333;
+  width: 50%;
+  padding-top: 50%;
+}
+
+

Demo

+

Resize your browser window to see the proportion of the element remain the same.

+
+
+
+ +

Explanation

+

padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its width, i.e. 50% means the height + will be 50% of the element's width. This allows its proportion to remain constant.

+

Browser support

+
+
+ 99+% +
+
+

⚠️ padding-top pushes any content within the element to the bottom.

+

Custom text selection

Changes the styling of text selection.

diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md new file mode 100644 index 000000000..fb2eb53e9 --- /dev/null +++ b/snippets/constant-width-to-height-ratio.md @@ -0,0 +1,45 @@ +### Constant width to height ratio + +Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion +(i.e., its width to height ratio remains constant). + +#### HTML + +```html +
+``` + +#### CSS + +```css +.constant-width-to-height-ratio { + background: #333; + width: 50%; + padding-top: 50%; +} +``` + +#### Demo + +Resize your browser window to see the proportion of the element remain the same. + +
+
+
+ + + +#### Explanation + +`padding-top` and `padding-bottom` can be used as an alternative to `height` such that the percentage value +causes an element's height to become a percentage of its width, i.e. `50%` means the height will be 50% of the element's width. This allows its proportion to remain constant. + +#### Browser support + +⚠️ `padding-top` pushes any content within the element to the bottom.