library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add arbitrary ratio docs

Browse Source
This commit is contained in:
Jeremy Thomas 2019-07-25 11:04:03 +01:00
parent 2650860c98
commit eb28457c3c
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -7,6 +7,10 @@
* Fix #2031, Fix #2483 -> Invalid output when declaring a custom shade map
* Fix #2060 -> `height: auto` on HTML `audio` element breaks height of element
### New features
* #2563 `.image` has a new `.is-fullwidth` modifier
## 0.7.5
### Deprecation warning

20
docs/documentation/elements/image.html
View File

@ -40,6 +40,12 @@ meta:
</figure>
{% endcapture %}
{% capture iframe_ratio %}
<figure class="image is-16by9">
<iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4?showinfo=0" frameborder="0" allowfullscreen></iframe>
</figure>
{% endcapture %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
@ -172,11 +178,23 @@ meta:
</table>
<div class="content">
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
<p>The <code>.image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
</div>
{% include elements/anchor.html name="Arbitrary ratios with any element" %}
{% include elements/new-tag.html version="0.7.4" %}
<div class="content">
<p>
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>.has-ratio</code> modifier to a resizable element.
</p>
<p>
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.
</p>
</div>
{% include elements/snippet.html content=iframe_ratio horizontal=true %}
{% include elements/variables.html type='element' %}