bulma/docs/documentation/elements/image.html
2017-07-29 18:24:07 +01:00

144 lines
4.3 KiB
HTML

---
title: Image
layout: documentation
doc-tab: elements
doc-subtab: image
dimensions:
- 16
- 24
- 32
- 48
- 64
- 96
- 128
variables:
- name: $dimensions
value: 16 24 32 48 64 96 128
---
{% capture image %}
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
{% endcapture %}
{% capture retina_image %}
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>
{% endcapture %}
{% include subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Images</h1>
<h2 class="subtitle">
A container for <strong>responsive images</strong>
</h2>
{%
include meta.html
colors=false
sizes=false
variables=true
%}
<hr>
<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>
<div class="example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
</div>
{% highlight html %}{{ image }}{% endhighlight %}
<hr>
<h3 class="title">Fixed square images</h3>
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
</div>
<table class="table is-bordered">
<tbody>
{% for dimension in page.dimensions %}
<tr>
<td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
<td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
<td>{{ dimension }}x{{ dimension }}px</td>
</tr>
{% endfor %}
</tbody>
</table>
<h4 class="title is-4">Retina images</h4>
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
<div class="example">
<figure class="image is-128x128">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>
</div>
{% highlight html %}{{ retina_image }}{% endhighlight %}
<hr>
<h3 class="title">Responsive images with ratios</h3>
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifers</strong>:</p>
</div>
<table id="images" class="table is-bordered">
<tbody>
<tr>
<td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1by1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td>
</tr>
</tbody>
</table>
<div class="content">
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
</div>
{% include variables.html %}
</div>
</section>