bulma/docs/_includes/library/elements/image.html
Jeremy Thomas 69877a652c Init v1
2024-03-21 16:11:54 +00:00

149 lines
4.5 KiB
HTML

<table id="images" class="table is-bordered">
<tbody>
<tr>
<td><code>image is-square</code></td>
<td style="width: 10rem;">
<figure class="image is-square">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x480.png">
</figure>
</td>
<td>Square (or 1 by 1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td style="width: 10rem;">
<figure class="image is-1by1">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x480.png">
</figure>
</td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-5by4</code></td>
<td style="width: 10rem;">
<figure class="image is-5by4">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/600x480.png">
</figure>
</td>
<td>5 by 4</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td style="width: 10rem;">
<figure class="image is-4by3">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x480.png">
</figure>
</td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td style="width: 10rem;">
<figure class="image is-3by2">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x320.png">
</figure>
</td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-5by3</code></td>
<td style="width: 10rem;">
<figure class="image is-5by3">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/800x480.png">
</figure>
</td>
<td>5 by 3</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td style="width: 10rem;">
<figure class="image is-16by9">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x360.png">
</figure>
</td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td style="width: 10rem;">
<figure class="image is-2by1">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/640x320.png">
</figure>
</td>
<td>2 by 1</td>
</tr>
<tr>
<td><code>image is-3by1</code></td>
<td style="width: 10rem;">
<figure class="image is-3by1">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/720x240.png">
</figure>
</td>
<td>3 by 1</td>
</tr>
<tr>
<td><code>image is-4by5</code></td>
<td style="width: 10rem;">
<figure class="image is-4by5">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x600.png">
</figure>
</td>
<td>4 by 5</td>
</tr>
<tr>
<td><code>image is-3by4</code></td>
<td style="width: 10rem;">
<figure class="image is-3by4">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x640.png">
</figure>
</td>
<td>3 by 4</td>
</tr>
<tr>
<td><code>image is-2by3</code></td>
<td style="width: 10rem;">
<figure class="image is-2by3">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/320x480.png">
</figure>
</td>
<td>2 by 3</td>
</tr>
<tr>
<td><code>image is-3by5</code></td>
<td style="width: 10rem;">
<figure class="image is-3by5">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/480x800.png">
</figure>
</td>
<td>3 by 5</td>
</tr>
<tr>
<td><code>image is-9by16</code></td>
<td style="width: 10rem;">
<figure class="image is-9by16">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/360x640.png">
</figure>
</td>
<td>9 by 16</td>
</tr>
<tr>
<td><code>image is-1by2</code></td>
<td style="width: 10rem;">
<figure class="image is-1by2">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/320x640.png">
</figure>
</td>
<td>1 by 2</td>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td style="width: 10rem;">
<figure class="image is-1by3">
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/240x720.png">
</figure>
</td>
<td>1 by 3</td>
</tr>
</tbody>
</table>