mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Do elements
This commit is contained in:
Jeremy Thomas
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Image
|
||||
subtitle: "A container for <strong>responsive images</strong>"
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: image
|
||||
@@ -11,6 +12,15 @@ dimensions:
|
||||
- 64
|
||||
- 96
|
||||
- 128
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-image
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture image %}
|
||||
@@ -25,151 +35,131 @@ dimensions:
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
<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>
|
||||
|
||||
<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
|
||||
%}
|
||||
{% include snippet.html content=image %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Fixed square images" %}
|
||||
|
||||
<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="content">
|
||||
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=image %}
|
||||
<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>
|
||||
|
||||
{% include anchor.html name="Fixed square images" %}
|
||||
{% include anchor.html name="Retina images" %}
|
||||
|
||||
<div class="content">
|
||||
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{% include snippet.html content=retina_image %}
|
||||
|
||||
{% include anchor.html name="Retina images" %}
|
||||
{% include anchor.html name="Responsive images with ratios" %}
|
||||
|
||||
<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="content">
|
||||
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=retina_image %}
|
||||
<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 1 by 1)</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-5by4</code></td>
|
||||
<td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
|
||||
<td>5 by 4</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-5by3</code></td>
|
||||
<td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
|
||||
<td>5 by 3</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>
|
||||
<tr>
|
||||
<td><code>image is-3by1</code></td>
|
||||
<td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
|
||||
<td>3 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by5</code></td>
|
||||
<td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
|
||||
<td>4 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by4</code></td>
|
||||
<td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
|
||||
<td>3 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by3</code></td>
|
||||
<td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
|
||||
<td>2 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by5</code></td>
|
||||
<td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
|
||||
<td>3 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-9by16</code></td>
|
||||
<td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
|
||||
<td>9 by 16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by2</code></td>
|
||||
<td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
|
||||
<td>1 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
|
||||
<td>1 by 3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Responsive images with ratios" %}
|
||||
<div class="content">
|
||||
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||
</div>
|
||||
|
||||
<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>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</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 1 by 1)</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-5by4</code></td>
|
||||
<td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
|
||||
<td>5 by 4</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-5by3</code></td>
|
||||
<td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
|
||||
<td>5 by 3</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>
|
||||
<tr>
|
||||
<td><code>image is-3by1</code></td>
|
||||
<td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
|
||||
<td>3 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by5</code></td>
|
||||
<td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
|
||||
<td>4 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by4</code></td>
|
||||
<td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
|
||||
<td>3 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by3</code></td>
|
||||
<td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
|
||||
<td>2 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by5</code></td>
|
||||
<td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
|
||||
<td>3 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-9by16</code></td>
|
||||
<td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
|
||||
<td>9 by 16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by2</code></td>
|
||||
<td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
|
||||
<td>1 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
|
||||
<td>1 by 3</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 type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
Reference in New Issue
Block a user