Может ли 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)для достижения как подписи к изображению, обернутой не шире самого изображения, так и изображения не шире окна просмотра?

15
задан detly 22 April 2012 в 01:21
поделиться