W3.CSS Изображения
Закругленное изображение:
Круглое изображение:
Изображение с границей:
Текст на изображении:
Закругленное изображение
Класс w3-round добавляет закругленные углы к изображению:
Круглое изображение
Класс w3-circle формирует изображение в круг:
Изображение с границей
Класс w3-border добавляет границы вокруг изображения:
Изображение как карточка
Оберните любой из классов w3-card-* вокруг элемента <img> чтобы отобразить его как карточку (добавьте тени):
Вася
Админ всех админов
Пример
<div class="w3-card-4">
<img src="img_avatar.png"
alt="Админ всех админов">
</div>
Попробуйте сами »
Текст на изображении
Разместите текст на изображении с помощью w3-display-классов:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Top Middle
Bottom Middle
Пример
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
Попробуйте сами »
Адаптивные изображения
Изображение может быть настроено на автоматическое изменение размера в соответствии с размером его контейнера.
Если вы хотите, чтобы изображение уменьшалось, но оно не должно быть больше исходного размера, используйте класс w3-image.
Если вы хотите, чтобы изображение реагировало на увеличение и уменьшение масштаба, установите для CSS свойства width значение 100%:
Если вы хотите ограничить адаптивное изображение максимальным размером, используйте свойство max-width:
Непрозрачность / Opacity
Классы w3-opacity делают изображения прозрачными:
Обычное
w3-opacity-min
w3-opacity
w3-opacity-max
Пример
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
Попробуйте сами »
Оттенки серого
Классы w3-grayscale добавляют эффект серого к изображению:
Обычное
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Пример
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
Попробуйте сами »
Примечание: Классы w3-grayscale не поддерживаются в IE 11 и более ранних версиях.
Сепия
Классы w3-sepia добавляют эффект сепии к изображению:
Обычное
w3-sepia-min
w3-sepia
w3-sepia-max
Пример
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
Попробуйте сами »
Примечание: Классы w3-sepia не поддерживаются в IE 11 и более ранних версиях.
Эффекты при наведении
Вы также можете добавить специальные эффекты при наведении курсора мыши.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Пример
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
Попробуйте сами »
Непрозрачность выключена
Добавить прозрачность при наведении:
Удалить прозрачность при наведении:
Класс w3-hover-opacity добавляет прозрачность изображению при наведении мыши, а класс w3-hover-opacity-off удаляет прозрачность при наведении курсора.
Пример
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Альпы">
Попробуйте сами »
Создание фотоальбома
В этом примере мы используем систему Responsive Grid W3.CSS (адаптивная сетка W3.CSS) для создания фотоальбома, который хорошо выглядит на всех устройствах. Вы узнаете больше об этом позже.
Лето 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Пример
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Попробуйте сами »
