縮圖

如果您要使用影像作為錨點，我們已為您準備好。您只要將一個類別新增到您的影像，就大功告成了！

.thumbnail 類別可以直接套用至 <img> 元素，或包覆它的 <a>。請確定 <img> 有 alt 屬性，用以描述影像內容。

<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
<a href="#" class="thumbnail"><img src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune."></a>
<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">

Sass 參考

變數

此元件的預設樣式可以使用專案設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$thumbnail-border`	邊框	`4px solid $white`	縮圖影像周圍的邊框。
`$thumbnail-margin-bottom`	長度	`$global-margin`	縮圖影像的底部邊距。
`$thumbnail-shadow`	陰影	`0 0 0 1px rgba($black, 0.2)`	縮圖影像下的方塊陰影。
`$thumbnail-shadow-hover`	陰影	`0 0 6px 1px rgba($primary-color, 0.5)`	縮圖影像下的方塊陰影。
`$thumbnail-transition`	過渡	`box-shadow 200ms ease-out`	縮圖影像的過渡屬性。
`$thumbnail-radius`	數字	`$global-radius`	縮圖影像的預設半徑。

混合

我們使用這些混合來建構此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建構自己的類別結構。

縮圖

@include thumbnail;

將縮圖樣式新增至元素。