Реклама на сайте (разместить):



Реклама и пожертвования позволяют нам быть независимыми!

Справка:Изображения

Материал из Викизнание
Перейти к: навигация, поиск

Расположение изображения[править]

Example.jpg
Example.jpg
Example.jpg
[[Файл:Example.jpg|справа|100пкс]]
[[Файл:Example.jpg|слева|100пкс]]
[[Файл:Example.jpg|центр|100пкс]]

В отличие от изображения с атрибутом «мини», в данном случае изображение не оказывается заключённым в рамку, и замещающий текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать замещающий текст после атрибута «справа», за вертикальной чёрточкой. Пример:

Пояснительный текст
[[Файл:Example.jpg|справа|100пкс|Пояснительный текст]]

С атрибутом «мини»:

Подпись 1
Подпись 2
Подпись 3
[[Файл:Example.jpg|мини|100пкс|Подпись 1]]
[[Файл:Example.jpg|мини|слева|100пкс|Подпись 2]]
[[Файл:Example.jpg|мини|центр|100пкс|Подпись 3]]

Расположение нескольких изображений[править]

Галерея[править]

Вариант 1[править]

Ширина и высота рамки для всех изображений в галерее будет одинаковой.

<gallery>
 Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|1. Слева без обтекания
 Landschaftspark Duisburg-Nord - Hochoefen 1 und 2 vom Sinterplatz.jpg|2. Слева без обтекания
</gallery>
<gallery style="float:left; clear:left">
 Example.jpg|1. Слева с обтеканием
 Example.jpg|2. Слева с обтеканием
</gallery>
<gallery style="float:right; clear:right">
 Example.jpg|1. Справа с обтеканием
 Example.jpg|2. Справа с обтеканием
</gallery>
<gallery class="center" style="clear:both">
 Example.jpg|1. В центре без обтекания
 Example.jpg|2. В центре без обтекания
</gallery>

Вариант 2[править]

Высота всех изображений одинакова, ширина индивидуальна. Используется код mode="packed". Примечание: заголовок (код caption="Заголовок") можно не указывать.

<gallery mode="packed" heights="140px" caption="Заголовок 1">
 Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|1. В центре без обтекания
 Landschaftspark Duisburg-Nord - Hochoefen 1 und 2 vom Sinterplatz.jpg|2. В центре без обтекания
</gallery>
<gallery mode="packed" heights="140px" caption="Заголовок 2" style="float:right; clear:right">
 Example.jpg|1. Справа с обтеканием
 Example.jpg|2. Справа с обтеканием
</gallery>
<gallery mode="packed" heights="140px" caption="Заголовок 3" style="float:left; clear:left">
 Example.jpg|1. Слева с обтеканием
 Example.jpg|2. Слева с обтеканием
</gallery>

Параметры[править]

Есть следующие параметры, регулирующие форматирование галереи:

  • perrow — количество элементов в строке (не работает в режиме packed)
  • widths — размер (каждой) картинки по горизонтали (не работает в режиме packed)
  • heights — размер (каждой) картинки по вертикали
  • showfilename — с любым значением включает отображение имен файлов для каждого изображения[1].
<gallery perrow=2 widths="200px" heights="200px">
 NASA-Apollo8-Dec24-Earthrise.jpg
 Mercury in color - Prockter07 centered.jpg
 Portrait of Jupiter from Cassini.jpg
 Apollo 11 bootprint.jpg
</gallery>

Галерея в таблице[править]

Галерея + таблица

{| style="float:right; clear:right; background:#f8f9fa; border-collapse:collapse; border:1px solid #c8ccd1; margin-left:0.8em"
|-
|style="padding:0"|<gallery mode="packed" heights="140px">
  Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|Фото 1
  Landschaftspark Duisburg-Nord - Hochoefen 1 und 2 vom Sinterplatz.jpg|Фото 2
</gallery>
|}
{| style="float:left; clear:left; background:#f8f9fa; border-collapse:collapse; border:1px solid #c8ccd1; margin-right:0.8em"
|-
|style="padding:0"|<gallery mode="packed" heights="140px">
  Example.jpg|Фото 1
  Example.jpg|Фото 2
</gallery>
|}
{| style="margin:auto; clear:both; background:#f8f9fa; border-collapse:collapse; border:1px solid #c8ccd1"
|-
|style="padding:0"|<gallery mode="packed" heights="140px">
  Example.jpg|Фото 1
  Example.jpg|Фото 2
</gallery>
|}

Таблица[править]

Используется таблица

Файл 1
Файл 2
{| style="float:right; clear:right; border-collapse:collapse"
|-style="vertical-align:top"
|style="padding:0"| [[Файл:Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|мини|100пкс|Файл 1]]
|style="padding:0"| [[Файл:Dortmund Florianturm nachts IMGP8456.jpg|мини|100пкс|Файл 2]]
|}

Выравнивание по вертикали задаётся свойством vertical-align, принимающим значения top (верх), bottom (низ) или center (центр).

Файл 1
Файл 2
{| style="float:right; clear:right; border-collapse:collapse"
|-style="vertical-align:bottom"
|style="padding:0"| [[Файл:Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|мини|100пкс|Файл 1]]
|style="padding:0"| [[Файл:Dortmund Florianturm nachts IMGP8456.jpg|мини|100пкс|Файл 2]]
|}
Файл 1
Файл 2
{| style="float:left; clear:left; border-collapse:collapse"
|-style="vertical-align:top"
|style="padding:0"| [[Файл:Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|мини|слева|100пкс|Файл 1]]
|style="padding:0"| [[Файл:Dortmund Florianturm nachts IMGP8456.jpg|мини|слева|100пкс|Файл 2]]
|}
{| style="margin:auto; clear:both; border-collapse:collapse"
|-style="vertical-align:top"
|style="padding:0"| [[Файл:Landschafts Duisburg-Nord - Hochofen 5 - Cowper.jpg|мини|слева|100пкс|Файл 1]]
|style="padding:0"| [[Файл:Dortmund Florianturm nachts IMGP8456.jpg|мини|слева|100пкс|Файл 2]]
|}
Файл 1
Файл 2

Тег «div»[править]

Файл 1
Файл 2
Файл 3
<div style="float:right; clear:right">[[Файл:Example.jpg|мини|Файл 1]]</div>
<div style="float:right">[[Файл:Example.jpg|мини|Файл 2]]</div>
<div style="float:right">[[Файл:Example.jpg|мини|Файл 3]]</div>
Файл 1
Файл 2
Файл 3
<div style="float:left; clear:left">[[Файл:Example.jpg|мини|слева|Файл 1]]</div>
<div style="float:left">[[Файл:Example.jpg|мини|слева|Файл 2]]</div>
<div style="float:left">[[Файл:Example.jpg|мини|слева|Файл 3]]</div>

Запрет обтекания[править]

Чтобы текст или другие объекты не обтекали предыдущие объекты (изображения или таблицы), поместите перед ними шаблон {{Clear}} или код <div style="clear:both"></div>.

Примечания[править]


Статью можно улучшить?
✍ Редактировать 💸 Спонсировать 🔔 Подписаться 📩 Переслать 💬 Обсудить
Позвать друзей
Вам также может быть интересно: