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