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

Содержание

html — bootstrap блоки с изображениями и подписью сверху

Вопрос задан 6 лет 8 месяцев назад

Изменён 6 лет 8 месяцев назад

Просмотрен 989 раз

Как с помощью Bootstrap 3, сделать структуру из 5 колонок с изображениями и с заголовком сверху, как на скриншоте?

html
css
bootstrap

Можно сделать пять двух-колоночных столбцов и добавить первому из них смещение на одну колонку.

.five-blocks .text {
  background: #fde;
  padding: 4px 8px;
  text-align: center;
}
.five-blocks img {
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3. 3.7/css/bootstrap.min.css">

<div>
  <div>
    <div><div>Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div>
    <div><div>Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div>
    <div><div>Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div>
    <div><div>Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div>
    <div><div>Text</div><img src="//placehold.it/600x300/c69/fff/?text=Photo" alt=""></div>
  </div>
</div>

Не думаю что вам для этого потребуется

bootstrap. Если использовать его колонки, то между карточками услуг будет оставаться лишнее пустое место. Я бы сделал их inline-block с расстоянием между буквами сколько-то px (чтобы задать пустое пространство между ними) либо с float-left и отступом по сторонам.

Посмотрите пример с float-left (тут понадобится clearfix hack, в бутстрапе он уже встроен). Возможно это вам подойдет.

.services {
  clear: both;
}
.services:before,
.services:after {
  content: ' ';
  display: table;
}
.services:after {
  clear: both;
}
.service-card {
  float: left;
  margin: 10px;
  width: 130px;
  padding: 0;
  background-color: pink;
  color: #777;
}
.service-card > h5,
.service-card > p {
  margin: 5px 2px;
  padding: 0;
  text-align: center;
  font-size: 12px;
}
.service-card > h5 {
  font-size: 14px;
  height: 16px;
}
.service-card > p {
  height: 45px;
}
.service-card > img {
  display: block;
}

<div>
  <div>
    <h5>
      Caption 1
    </h5>
    <p>
      Some text description goes here goes here
    </p>
    <img src="https://placehold.  it/130x80" />
  </div>
  <div>
    <h5>
      Caption 2
    </h5>
    <p>
      Some text description goes here
    </p>
    <img src="https://placehold.it/130x80" />
  </div>
  <div>
    <h5>
      Caption 3
    </h5>
    <p>
      Some text description goes here
    </p>
    <img src="https://placehold.it/130x80" />
  </div>
  <div>
    <h5>
      Caption 4
    </h5>
    <p>
      Some text description goes here goes here goes here here
    </p>
    <img src="https://placehold.it/130x80" />
  </div>
  <div>
    <h5>
      Caption 4
    </h5>
    <p>
      Some text description goes here goes here goes here here
    </p>
    <img src="https://placehold.  it/130x80" />
  </div>
</div>

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

Подписи для картинок на HTML и CSS

В вёрстке часто приходится работать с картинками. Не в контексте создания с их помощью оформления, а именно картинками как картинками. И дизайнеры иногда очень любят придумывать различные способы оформления подписей к картинкам, вёрстка которых может вызвать затруднения у начинающих. В этой заметке я постараюсь раскрыть один из способов вёрстки подписей для изображений.

Итак, мы хотим увидеть результат примерно как на рисунке 1.

Рисунок 1. Исходная картинка

Для этого нам понадобиться написать вот такой html-код:

Пока всё просто: оборачиваем картинку в блок, ниже картинки внутри span вписываем подпись для неё. Сам приём основан на добавлении к элементу, содержащему подпись (в данном случае — к span), абсолютного позиционирования и расположения внизу, что позволит тексту в нём растягивать элемент не вниз, а вверх. Но чтобы все элементы вели себя правильно, нужно будет прописать некоторые стили и для картинки, и для блока-обёртки. Итак, по порядку.

Так как span у нас будет абсолютным, к обёртке нужно добавить position: relative, а также указать ширину.

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

Но больше всего стилей мы пропишем для span:

мы делаем его блоком
задаём padding чтобы текст не прилипал к краям
задаём принудительную ширину (не забудьте уменьшить её на ширину padding’a)
делаем абсолютное позиционирование и «приклеиваем» к низу блока-обёртки, который является визуально и самым низом картинки
далее задаём цвет фона, его прозрачность (согласно статье 12 простых и полезных приёмов ), оформляем текст подписи по вкусу

Таким образом, самое главное — это первые пять свойств. Остальное оформление вы можете изменить как угодно на ваше усмотрение. В итоге получилась такая страничка:

Обратите внимание Ширины блока-обёртки, картинки и блока с названием с учётом padding должны быть равными!

Изображение HTML

(картинка)

Вставка на страницу изображения графического формата производится с помощью тега <img> с обязательным атрибутом src.

Атрибуты тега <img>

Атрибут	Значение
src	= URL URL — адрес или имя файла изображения
width	= «число» Ширина изображения
height	= «число» Высота изображения
alt	= «текст» Альтернатавный текст, который будет появлятся вместо графического изображения в рехиме «отключения загрузки графики».
align	Атрибут align тега <img> используется для выравнивания изображения относительно текста.

= absbottom
Выравнивание нижней границы изображения по нижней границе текущей строки.

= absmiddle
Выравнивание середины изображения по середине текущей строки.

= baseline
Выравнивание нижней границы изображения по базовой линии текущей строки.

= bottom
То же, что и baseline.

= top
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

= texttop
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

= left
Изображение располагается у левого края окна;
текст и другие элементы обтекают изображение справа .

= right
Изображение располагается у правого края окна;
текст и другие элементы обтекают изображение слева .

Для прекращения выравнивания изображения, заданного с помощью align=left или align=right , относительно текста используют тег <br> перевода строки с атрибутом clear

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

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

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

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

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

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

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

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

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

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

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

К CSS выше добавить: Когда-нибудь котёнок выберется из лужи

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

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

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

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.
А ниже, после
<figure />,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

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

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

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

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