Как сделать ширину моей <figcaption> равной ширине <img> внутри тега <figure>?

Скажем, у меня есть этот код:

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

Если я не использую CSS, figcaption будет расширять ширину фигурного элемента за пределами 200 пикселей. Как я могу предотвратить это?

Я знаю, что могу заставить текст внутри figcaption обернуть, указав ширину фигурного элемента (<figure style="width:200px;">), но я действительно не хочу использовать его для каждого изображения.

Ответ 1

Это поместит figcaption рядом с img:

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Вот пример. Однако я не совсем понимаю, чего вы пытаетесь достичь - вы говорите в вопросе, что вы хотите, чтобы figure оставался на ширине 200 пикселей, но затем вы прокомментируете, что хотите, чтобы figcaption отображался справа, что сделало бы figure шире. Если вы хотите, чтобы figcaption ограничивался шириной изображения, это должно работать:

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it narrower than any image */
}
img, figcaption {
    display: table-row;
}

Ответ 2

Добавление этого кода в <figure> и <figcaption> CSS-атрибуты помогли мне с той же проблемой. Кроме того, он сохраняет ответы ваших изображений и титров.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }

Добавление display: table; устанавливает этап.
Добавление только display: table-caption; помещало надпись поверх изображение, свойство caption-side указывает размещение заголовок таблицы на bottom, top по умолчанию.

Ответ 3

Другое решение: используйте Внутренняя ширина

Просто установите width: min-content; на элемент figure

DEMO (за исключением IE)

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

<figure>
  <img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
  <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

Ответ 4

К сожалению, установка ширины фигуры вместо использования max-width: 100% означает, что она не будет сокращаться на узких (мобильных) устройствах. То есть изображения не будут отзывчивыми. Я прибегал к вставке <br />, чтобы разбить длинные подписки, но мне это не понравилось. Но эта неясная функция CSS, похоже, работает для меня:

figcaption { display: run-in; width: 150px }

Это обеспечивает обратную реакцию изображения, даже если подпись отсутствует. Вы можете выбрать свою собственную подпись. Я также добавил margin: auto; text-align: center;, чтобы центрировать подпись на мобильном устройстве.

Ответ 5

Это действительно беспокоило меня, потому что я хотел найти ответ, чтобы разместить обновление до HTML5, которое бы успешно заменило мою первоначальную настройку отображения изображений и титров - таблицу с двумя строками (или одну, если подпись не была доступна).

Мое решение может не работать для всех, но до сих пор оно, как представляется, прекрасно работает в основных браузерах (O, FF, IE, S, C), а также реагирует на мобильные устройства:

figure {
border: 0px solid #000;
display: table;
width: 0;
}

Идея здесь состоит в том, что figure создается в виде ширины img и поэтому не нуждается в каком-либо направлении.

figure img {
display: block;
}

Это используется, чтобы избавиться от бесполезного, неприглядного зазора между дном img и нижней частью figure.

figcaption {
text-align: left;
}

Теперь эта цифра была открыта достаточно широко, чтобы текст img in, figcaption имел только ограниченное пространство для существования. text-align для этого решения не требуется.

Это решение работает так же, как и display: table-caption, но сохраняет figcaption в любом значении границы или фона, которое может потребоваться установить.