andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add constant-width-to-height-ratio snippet

Browse Source
This commit is contained in:
atomiks
2018-02-27 18:45:26 +10:00
parent 5960f737d7
commit 6d23e97baa
2 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -17,6 +17,7 @@
</button>
<div class="sidebar__links">
<a class="sidebar__link" href="#clearfix">Clearfix</a>
<a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a>
<a class="sidebar__link" href="#custom-text-selection">Custom text selection</a>
<a class="sidebar__link" href="#easing-variables">Easing variables</a>
<a class="sidebar__link" href="#etched-text">Etched text</a>
@ -99,6 +100,40 @@
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
</div>
<div class="snippet">
<h3 id="constant-width-to-height-ratio">Constant width to height ratio</h3>
<p>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).</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="constant-width-to-height-ratio"&gt;&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
</code></pre>
<h4 data-type="Demo">Demo</h4>
<p>Resize your browser window to see the proportion of the element remain the same.</p>
<div class="snippet-demo">
<div class="snippet-demo__constant-width-to-height-ratio"></div>
</div>
<style>
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
</style>
<h4 data-type="Explanation">Explanation</h4>
<p><code>padding-top</code> and <code>padding-bottom</code> can be used as an alternative to <code>height</code> such that the percentage value causes an element's height to become a percentage of its width, i.e. <code>50%</code> means the height
will be 50% of the element's width. This allows its proportion to remain constant.</p>
<h4 data-type="Browser support">Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
</div>
</div>
<p><span class="snippet__support-note">⚠️ <code>padding-top</code> pushes any content within the element to the bottom.</span></p>
</div>
<div class="snippet">
<h3 id="custom-text-selection">Custom text selection</h3>
<p>Changes the styling of text selection.</p>

45
snippets/constant-width-to-height-ratio.md Normal file
View File

@ -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
<div class="constant-width-to-height-ratio"></div>
```
#### 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.
<div class="snippet-demo">
<div class="snippet-demo__constant-width-to-height-ratio"></div>
</div>
<style>
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
padding-top: 50%;
}
</style>
#### 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
<span class="snippet__support-note">⚠️ `padding-top` pushes any content within the element to the bottom.</span>