html - figcaption 可以限制为响应大小的图像的宽度吗？

Question

假设我有以下 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;
}

如果我想让图像“响应式”——也就是说，不大于视口(viewport)——我也需要这个 CSS:

img {
    max-width: 100%;
}

但是将这两者结合起来会导致一团糟!现在，img 的父级设置了显式宽度，max-width 使整个图形变得非常非常小(虽然不完全是 1px)。

那么是否有可能使用 CSS(2 或 3)来实现同时包裹到不比图像宽的图像标题和不比视口(viewport)宽的图像？

Answer 1

我遇到了同样的问题并且能够想出 a fairly neat solution , 灵感来自 this .

HTML:

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

CSS:

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

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

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

这确保 figcaption 不会超过 figure 的宽度，同时允许您在图像上保持 max-width。适用于所有优秀的浏览器和 IE8+。

图形的宽度将是图像的原始宽度，除非该宽度以其他方式受到限制。