广州市天河区天河路621号天娱广场西塔10楼
EAIC界面库
为避免在图片加载完成前破坏页面结构,可以使用带
.image
类的图片容器
<figure class="image is-128x128"> <img src="/tpl/product/ebfcss/images/128x128.png"> </figure>
图片规格
内置了7种规格大小的图片容器
image is-16x16
|
|
16x16px |
image is-24x24
|
|
24x24px |
image is-32x32
|
|
32x32px |
image is-48x48
|
|
48x48px |
image is-64x64
|
|
64x64px |
image is-96x96
|
|
96x96px |
image is-128x128
|
|
128x128px |
圆形图片
通过添加
.is-rounded
来来展示圆形的图片
<figure class="image is-128x128"> <img class="is-rounded" src="/tpl/product/ebfcss/images/128x128.png"> </figure>
等比缩放
可以使用比图片容器大4倍的图片,它会自动缩放为容器大小
<figure class="image is-128x128"> <img src="/tpl/product/ebfcss/images/256x256.png"> </figure>
响应式
当你不知道图片尺寸,但知道它的长宽比时,可以使用以下16种比例设置
image is-square
|
|
正方形(或 1:1) |
image is-1by1
|
|
1:1 |
image is-5by4
|
|
5:4 |
image is-4by3
|
|
4:3 |
image is-3by2
|
|
3:2 |
image is-5by3
|
|
5:3 |
image is-16by9
|
|
16:9 |
image is-2by1
|
|
2:1 |
image is-3by1
|
|
3:1 |
image is-4by5
|
|
4:5 |
image is-3by4
|
|
3:4 |
image is-2by3
|
|
2:3 |
image is-3by5
|
|
3:5 |
image is-9by16
|
|
9:16 |
image is-1by2
|
|
1:2 |
image is-1by3
|
|
1:3 |