Images

Lazy 中的圖片皆設定了以下 CSS 屬性

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: top;
}

透過以下範例,可以選擇一種樣式讓你的圖片呈現不同的樣式。IE 8 不支援 border-radius 屬性,使用 .img-circle 時,建議圖片比例為 1:1 的正方形。

<img class="img-rounded" src="path/images.jpg" />
<img class="img-polaroid" src="path/images.jpg" />
<img class="img-circle" src="path/images.jpg" />

Avatar

使用頭像樣式時,建議圖片為 1:1 的正方形。

預設樣式與尺寸

預設尺寸為 48pixel X 48pixel。

<div class="avatar"><img src="path/images.jpg" /></div>
<div class="avatar size-xxs"><img src="path/images.jpg" /></div>
<div class="avatar size-xs"><img src="path/images.jpg" /></div>
<div class="avatar size-sm"><img src="path/images.jpg" /></div>
<div class="avatar size-lg"><img src="path/images.jpg" /></div>
<div class="avatar size-xl"><img src="path/images.jpg" /></div>
<div class="avatar size-xxl"><img src="path/images.jpg" /></div>

Bordered

.avatar 增加 .avatar-bordered

<div class="avatar avatar-bordered size-xxs"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered size-xs"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered size-sm"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered size-lg"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered size-xl"><img src="path/images.jpg" /></div>
<div class="avatar avatar-bordered size-xxl"><img src="path/images.jpg" /></div>

Circle

.avatar 增加 .avatar-circle

<div class="avatar avatar-circle size-xxs"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle size-xs"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle size-sm"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle size-lg"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle size-xl"><img src="path/images.jpg" /></div>
<div class="avatar avatar-circle size-xxl"><img src="path/images.jpg" /></div>

Parent-child

.avatar 內新增一張子圖片並且為它加上 .avatar-child

<div class="avatar">
    <img src="path/images.jpg" />
    <img class="avatar-child" src="path/images.jpg" />
</div>