bulmacss/docs/cyp/elements/image.html at master · GlenSmale/bulmacss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
---
layout: cypress
title: Elements/Image
dimensions:
- 16
- 24
- 32
- 48
- 64
- 96
- 128
ratios:
- square
- 1by1
- 5by4
- 4by3
- 3by2
- 5by3
- 16by9
- 2by1
- 3by1
- 4by5
- 3by4
- 2by3
- 3by5
- 9by16
- 1by2
- 1by3
---

<div class="block">
  <figure id="image" class="image is-128x128">
    <img src="{{ site.url }}/images/placeholders/128x128.png">
  </figure>
</div>

<div class="block">
  <figure id="image-rounded" class="image is-128x128">
    <img class="is-rounded" src="{{site.url}}/images/placeholders/128x128.png">
  </figure>
</div>

{% for ratio in page.ratios %}
  <div class="block" style="width: 100px;">
    <figure id="image-{{ ratio }}" class="image is-{{ ratio }}">
      <img src="{{ site.url }}/images/placeholders/1x1.png">
    </figure>
  </div>
{% endfor %}

{% for dimension in page.dimensions %}
  <div class="block">
    <figure id="image-{{ dimension }}" class="image is-{{ dimension }}x{{ dimension }}">
      <img src="{{ site.url }}/images/placeholders/1x1.png">
    </figure>
  </div>
{% endfor %}