缩略图

如果您要将图像用作锚点，我们可以满足您的需求。您只需将一个类添加到您的图像中即可！

.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 输出。您可以自己使用混合宏从我们的组件中构建自己的类结构。

thumbnail

@include thumbnail;

将缩略图样式添加到元素。