Может ли figcaption быть ограничена шириной изображения с быстрым размером?

Скажем, у меня есть следующий HTML:

<figure>
<img alt="Sun" src="sun.gif" width="256" height="256" />
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</figure>

Если я хочу, чтобы текст обертывался до ширины изображения, мне нужен этот CSS:

figure {
    display: table;
    width: 1px;
}

Если я хочу, чтобы изображение было "отзывчивым", то есть не больше, чем область просмотра, мне тоже нужен этот CSS:

img {
    max-width: 100%;
}

Но объединение этих двух результатов в ужасном беспорядке! Теперь, когда родитель img имеет явную ширину, max-width заставляет всю фигуру быть действительно, действительно крошечной (хотя и не совсем 1px).

Итак, можно ли использовать CSS (2 или 3) для достижения обоих заголовка изображения, обернутого не более, чем изображение, и изображение не более ширины, чем область просмотра?

Ответ 1

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

HTML:

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>

CSS

figure {
   background-color: #fff;
   padding: 5px;
   font-size: .875em;
   display: table;
}

figure img {
    display: block;
    width: 100%;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    background: #fff;
    padding: 0 5px 5px;
}

Это гарантирует, что figcaption не превышает ширину figure, позволяя вам сохранять max-width на изображении. Работает во всех хороших браузерах и IE8 +.

Там есть ошибка Firefox, которая предотвращает max-width, работающую в элементах, которые установлены на display: table. Таким образом, вместо использования max-width на изображении установка его ширины на 100% означает, что это работает кросс-браузер. Ширина фигуры будет такой, какова бы ни была нативная ширина изображения, если только эта ширина не ограничена каким-либо другим способом.

Ответ 2

Таким образом, можно использовать CSS (2 или 3) для достижения как надписи изображения обернутый не шире изображения, а изображение не шире, чем окно просмотра?

Да. Просто используйте единицы просмотра в img - max-width: 100vw; вместо% - max-width: 100%;

DEMO

Только для полноты:

Есть еще 2 метода, чтобы текст обертывался по ширине изображения:

1) Установите display: table-caption; на figcaption

DEMO

2) Установите width: min-content на figure

DEMO

Ответ 3

Является ли масштабирование изображения важным? Если нет, тогда рассмотрите использование фоновых изображений.

PURE CSS:

<figure>
<div class="caption">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{
background:url(sun.gif) no-repeat 0 0 scroll;
width:256px;
height:256px;
position:absolute;
}
</style>

CSS с INLINE STYLING:

<figure>
<div class="caption" style="background:url(sun.gif) no-repeat 0 0 scroll;width:256px;height:256px;">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{position:absolute;}
</style>

Ответ 4

Супер старый вопрос, но я сейчас в той же ситуации, и я думаю, что нашел очень простое решение. По общему признанию, я тестировал это только в последних версиях, которые в настоящее время: IE 11 FF 37 Chrome 40

<figure>
   <img>
   <figcaption>
</figure>

figure {
   display: table;
   width: 50px; /* Set this to the minimum caption width */
}

И что это. Я не знаю, будет ли это причуда, которая будет исправлена в будущем, но она работает очень хорошо прямо сейчас. Если изображение больше 50 пикселей, фигура и figcaption будут автоматически изменяться. Если оно меньше 50px, заголовок остается 50px;

Ответ 5

Если я хочу, чтобы текст обертывался по ширине изображения, мне нужен этот CSS: [...]

Вместо жесткого кодирования размер использует min-content.

figure {
    display: block;
    border: 1px dotted blue;
    margin: 3px;
}
figure>figure {
    display: inline-block;
    border: 2px solid red;
    width: min-content;
}

<figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum  </figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100"  alt="An image of a bunny rabbit." />
		<figcaption>Lorem ipsum dolor sit amet, consectetur</figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem </figcaption>
	</figure>
	<figure>
		 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem placeat officia </figcaption>
	</figure>
</figure>