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

Question

Скажем, я получил этот код:

<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 увеличит ширину элемента figure до 200px.Как я могу предотвратить это?

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

Answer 1

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

figure { display: table; }


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

1. Добавление display: table; устанавливает сцену.

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

Answer 2

Это поместит 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's narrower than any image */
}
img, figcaption {
    display: table-row;
}

Answer 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>

NB: Поддержка браузера в порядке , за исключением IE, однако они рассматривают возможность реализации этого

Answer 4

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

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

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

Answer 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 войти, figcaption текст имеет только то ограниченное пространство, в котором он может существовать. text-align не требуется для работы этого решения.

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