ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
W3CSS. Уроки для начинающих

W3.CSS Изображения


Закругленное изображение:

Northern Lights

Круглое изображение:

Forest

Изображение с границей:

Mountains

Текст на изображении:

Nature
Природа

Закругленное изображение

Norway

Класс w3-round добавляет закругленные углы к изображению:

Пример

<img src="img_snowtops.jpg" class="w3-round" alt="Norway">
Попробуйте сами »

Круглое изображение

Norway

Класс w3-circle формирует изображение в круг:

Пример

<img src="snowtops.jpg" class="w3-circle" alt="Alps">
Попробуйте сами »

Изображение с границей

Norway

Класс w3-border добавляет границы вокруг изображения:

Пример

<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">
Попробуйте сами »

Изображение как карточка

Оберните любой из классов w3-card-* вокруг элемента <img> чтобы отобразить его как карточку (добавьте тени):

Lights

Админ всех админов

Вася

Админ всех админов

Пример

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Админ всех админов">
</div>
Попробуйте сами »

Текст на изображении

Разместите текст на изображении с помощью w3-display-классов:

Lights

Top Left

Top Right

Bottom Left

Bottom Right

Left

Right

Middle

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.

Пример

<img src="img_lights.jpg" alt="Lights" class="w3-image">
Попробуйте сами »

Если вы хотите, чтобы изображение реагировало на увеличение и уменьшение масштаба, установите для CSS свойства width значение 100%:

Пример

<img src="img_lights.jpg" alt="Lights" style="width:100%">
Попробуйте сами »

Если вы хотите ограничить адаптивное изображение максимальным размером, используйте свойство max-width:

Пример

<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
Попробуйте сами »

Непрозрачность / 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 и более ранних версиях.


Эффекты при наведении

Вы также можете добавить специальные эффекты при наведении курсора мыши.

Norway

w3-hover-opacity

Norway

w3-hover-grayscale

Norway

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">
Попробуйте сами »

Непрозрачность выключена

Добавить прозрачность при наведении:

Norway

Удалить прозрачность при наведении:

Norway

Класс 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

Создание фотоальбома с помощью W3.CSS

5 Terre

Создание фотоальбома с помощью W3.CSS

Monterosso

Создание фотоальбома с помощью W3.CSS

Vernazza

Создание фотоальбома с помощью W3.CSS

Manarola

Создание фотоальбома с помощью W3.CSS

Corniglia

Создание фотоальбома с помощью W3.CSS

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>
Попробуйте сами »