Как подписать картинку в html
Перейти к содержимому

Как подписать картинку в html

  • автор:

Как добавить подпись под фотографией?

Добавить под фотографией подпись так, чтобы они одновременно обтекались близлежащим текстом.

Решение

Подпись под фотографией обычно применяется для комментирования изображения и краткого его описания. Хотя добавить подпись можно с помощью обычного абзаца, этот способ не работает, как только фотографию необходимо расположить по правому или левому краю веб-страницы. Подпись должна быть неразрывна с изображением, независимо от способа его расположения на странице.

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевое свойство float со значением right или left , а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Подрисуночная подпись  


Рис. 1. Фотография с подписью, выровненная по правому краю страницы

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока свойства width с фиксированным значением.

Подрисуночная подпись

Подрисуночная подпись — это текст, который является комментарием к рисунку и его описывает. Такая подпись важна, поскольку она привлекает внимание читателя к иллюстрации и даёт больше информации об изображении. У элемента существует, конечно, атрибут title , который задаёт текст всплывающей подсказки, но чтобы её получить, приходится наводить курсор мыши на каждый рисунок, что довольно неудобно. Более наглядный способ и, соответственно, более предпочтительный заключается в размещении подрисуночной подписи возле самого изображения. Подпись хоть и называется подрисуночной, но может располагаться сверху или сбоку от рисунка, если это продиктовано соображениями вёрстки и дизайна (рис. 1).

Варианты размещения подрисуночной подписи

Рис. 1. Варианты размещения подрисуночной подписи

Для размещения на веб-странице и рисунка, и подписи к нему удобно воспользоваться элементами и , а через стили задать параметры рисунка, а также расположение текста (пример 1).

Пример 1. Создание подрисуночной подписи

Изображения

Подпись снизу
Подпись сверху

Для изменения положения текста — сверху или снизу изображения, достаточно просто поменять местами элементы и . Для размещения сбоку применяем свойство float к селектору figcaption , но надо помнить, что это свойство воздействует на все нижележащие элементы тоже.

См. также

  • Атрибуты элементов
  • Выравнивание картинок
  • Добавление медиа-контента
  • Изображения
  • Изображения
  • Изображения в Bootstrap 5
  • Изображения в HTML
  • Масштабирование картинок
  • Фон в CSS
  • Форматы графических файлов
  • Элемент

Подпись картинки (теги figure и figcaption) | HTML

Внимание! Статья на переработке. Прежний вариант был перенесён сюда в связи с более подходящим заголовком.

Как сделать надпись под картинкой

котёнок мечтает стать львом

Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:

резинового дизайна -->  
котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

Автоматическая нумерация картинок

body < counter-reset: figures; >figure.img figcaption < counter-increment: figures; >figure.img figcaption:before

Изображение с подписью в рамке

Общий CSS стиль:

 figure.img < max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */ > figure.textizo < width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */ > figure.izo < width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */ > figure.img img < display: block; max-width: 100%; height: auto; margin: 0 auto; >figure.img figcaption

котёнок мечтает стать львом

Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.

textizo"> котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

котёнок мечтает стать львом

Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).

izo"> котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания.

izo">
style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание

HTML подпись под картинкой, появляющаяся после наведения курсора мышки

К CSS выше добавить:

figure.hover < position: relative; >figure.hover figcaption < position: absolute; left: 0; top: calc(100% + 5px); width: available; /* 100% минус горизонтальные margin, border и padding; нужен -moz- и -webkit- */ visibility: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px; > figure.hover:hover figcaption

котёнок мечтает стать львом

hover"> котёнок мечтает стать львом302">
style="width: 302px;">Когда-нибудь котёнок выберется из лужи

Несколько фотографий и одно описание

котёнок мечтает стать львом

Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно: Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

 figure.img < max-width: 100%; >figure.izo < width: min-content; margin: 0 auto; >figure.tri figure < width: 100%; margin: 0; letter-spacing: 6px; white-space: nowrap; >figure.img img < height: auto; margin: 0 auto; >figure.tri img < display: inline-block; max-width: calc(100%/3 - 4px); /* с учётом того, что фото одинаковой ширины, иначе JavaScript */ > figure.img figcaption 
котёнок мечтает стать львом гадкий утёнок смотрит в лоханку гадкий утёнок смотрит в воду, он стал лебедем
Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

Появление подписи картинки при наведении на неё курсора мышки

пока оно в этой статье Всякие эффекты для вдохновения: 1, 2, 3, 4, 5

14 комментариев:

Анонимный есть ли возможность автоматом проставлять теги alt и title для изображений в блоггере ? NMitra Я такого способа не знаю и поскольку всё равно пишу всё на вкладке "Изменить HTML", то добавление alt не вызывает у меня неудобства. Любопытно то, что в нескольких местах шаблона, например, в заголовке при использовании изображения, всё же данный атрибут применяется. Анонимный Хм, а если изображений 10-к или более на статью? Жуть. Раньше мне было все равно, но недавно стал юзать фоторекламу на блоге.
Жаль что этого не хотят решить разработчики Блоггера. NMitra Вот у меня тоже такое впечатление, что именно не хотят, а не не могут. Поскольку некоторые другие функции, которые добавленные в блог, удивляют. Анонимный 1 Olga Я сделала шапку блога в xHeader,картинку (часть картинки)я взяла на бесплатных изображениях,т.е.мне ее прописывать не надо. Как правильно записать HTML код, как будут просаны теги alt и title NMitra Если вы про http://3.bp.blogspot.com/-pI5NALFNY14/T0jg92DlVrI/AAAAAAAAAGg/QgQrIsLaKns/s1600/suberb%2B2%2B%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0%2B2.jpg , то она является фоновым изображением, прописана через стили, alt и title не требуются. Svetlana Kuzmina Добрый день! Я только начинающий блоггер, подскажите, пожалуйста, КАК сместить картинку в заголовке блога, чтобы она была СПРАВА? Заранее спасибо за помощь!
http://stylistjournal.blogspot.ru/ NMitra Добрый день. Справа от чего? Картинку нужно ужать?
Svetlana Kuzmina Наталья, спасибо, разобралась. Irina Sanirio Хочу, чтобы все изображения в блоге имели простую рамку с тенью и подпись находилась в рамке. Скопировала первый код из "Изображение с подписью в рамке", вставила в шаблон (в CSS). Не работает. NMitra То что в style - эту часть нужно вставить туда где CSS.
А ниже, после
,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

Сначала потренируйтесь, весь код целиком добавьте в сообщение на вкладке HTML.

Я пишу всю статью с включенным режимом HTML, мне не составит труда пару строк. А вам не думаю, что будет сподручно каждый раз переключаться. BUTAMUHbI4 "Когда-нибудь котёнок выберется из лужи". Тут смысл более широкий, чем кажется на самом деле. Образы слов следующие:

"котёнок" - это ребёнок, а в некоторых случаях и более объемлющее значение: человек.
"лужа" - это психологические (и только, т.к. всё остальное пляшет от психики человека) рамки, в которые загоняют котёнка с момента его появления на свет (и хуже всего то, что в большей степени это делают его родители на подсознательном уровне, т.к. сами росли в таких же рамках).

Отсюда рождается следующее:
Зачем загонять котёнка в лужу самОй постановкой изначального предложения? Ведь даже неоднозначное наречие "когда-нибудь" уже внедряет в подсознание котёнка возможность "вечного" пребывания в луже, т.к. есть вариант, что "когда-нибудь" никогда не случится (котёнок может просто умереть несколько раньше)..

ПС: это я так, лирика..)) NMitra 🙂

Как сделать подпись под картинкой в html

Для создания иллюстрации с подписью, в HTML5 включен новый элемент решаюший эту задачау - figure . Рассмотрим пример.

Исходный HTML документ:

  Рисунок №1.  src="1.jpg" alt="Wave">  
figure  /* задаём рамку и внутренние отступы для контента */ border: 1px solid #245488; padding: 10px; /* минимальная ширина блока, после которой не происходит масштабирование */ min-width: 250px; > figcaption  /* тэг идет первым в блоке - подпись будет сверху */ /* выравнивание по центру, и изменим фон */ text-align: center; background-color: #bac8d6; > img  /* картинка займет всю доступную ширину блока figure*/ width: 100%; > 

figure

Результат:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *