Миниатюры изображений

• Использование
• Подпись под картинкой
• Модификаторы размера
• Thumbnail и Grid

Использование

Чтобы начать использовать компонент Thumbnail, добавьте класс .uk-thumbnail к элементу <img>, <a> или <figure>.

Примеры

<!-- Thumbnail <img> -->
<img class="uk-thumbnail" src="" width="" height="" alt="">

<!-- Thumbnail <a> -->
<a class="uk-thumbnail" href="">
    <img src="" width="" height="" alt="">
</a>

<!-- Thumbnail <figure> -->
<figure class="uk-thumbnail">
    <img src="" width="" height="" alt="">
</figure>

Подпись под картинкой

Добавьте элемент <div> с классом .uk-thumbnail-caption, чтобы использовать текстовое описание под изображением. С элементом <figure> используйте тег <figcaption>.

Пример

Подпись <div>

Титр <a>

<!-- Это div в виде миниатюры с подписью -->
<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">Надпись</div>
</div>

<!-- Это ссылка в виде миниатюры с подписью -->
<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">Надпись</div>
</a>

<!-- Это figure в виде миниатюры с подписью -->
<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">Надпись</figcaption>
</figure>

Модификаторы размера

Добавьте класс .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small или .uk-thumbnail-mini, чтобы изменить размер изображения. Компонент Base применяет адаптивность изображений по умолчанию.

Пример

.uk-thumbnail-large

.uk-thumbnail-medium

.uk-thumbnail-small

.uk-thumbnail-mini

<div class="uk-thumbnail uk-thumbnail-large">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">Подпись</div>
</div>
<div class="uk-thumbnail uk-thumbnail-medium">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">Подпись</div>
</div>

<figure class="uk-thumbnail uk-thumbnail-small">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">Подпись</figcaption>
</figure>
<figure class="uk-thumbnail uk-thumbnail-mini">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">Подпись</figcaption>
</figure>

Вы даже можете масштабировать миниатюру за пределы ее настоящего размера, чтобы она отображалась на всю ширину родительского элемента. Для этого нужно добавить класс .uk-thumbnail-expand.

Пример

.uk-thumbnail-expand

<div class="uk-thumbnail uk-thumbnail-expand">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">Заголовок</div>
</div>

Thumbnail и Grid

Вы легко можете создать сетку с миниатюрами, используя компонент Grid.

Пример

<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
    </div>
</div>