如何使响应式图像和字幕相处融洽？

Question

在这种情况下，图像符合响应式设计，但字幕不随之调整 。

在代码中有意义，但如果不设置像素值的max-width怎么办呢？

有在两个图像中的单个section ，每一个内部figure与figcaption ：

<section>    
    <figure>
        <img src="link.jpg">
        <figcaption>Caption</figcaption>
    </figure>
    <figure>
        <img src="link.png">
        <figcaption>Caption</figcaption>
    </figure>
</section>

在CSS中 ，我们设置了一些东西，但最重要的是， img有max-width: 100%设置，但似乎没有办法让字幕做同样的事情：

如何在考虑旧版浏览器的响应式设计中避免这种重叠？ 除了在figure或section元素上设置max-width: 300px 。

请注意，任何解决方案都应该考虑当窗口变小时，它应该允许图像变小：

换句话说， auto margins应该消失。 （水平边距会在狭窄的视口上浪费空间。）

Answer 1

要将figcaption绑定到img的宽度，你需要将它们包装在一个元素内部，这个元素将折叠到img的宽度，在这种情况下我使用了div ：

<figure>
    <div>
        <img src="http://www.phibetaiota.net/wp-content/uploads/2012/10/Google-Data-Center.jpg">
        <figcaption>First example caption</figcaption>
    </div>
</figure>

使用CSS：

section figure div {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
}

JS小提琴演示 。

你可能希望调整这个div的overflow属性，显然，调整到味道。 但是，如果你想保持figure元素宽度为100％，那么你需要一个新元素，包含img和figcaption为了约束的宽度figcaption到了的img 。

Answer 2

我不确定我是否完全理解你想要达到的目标，但这是你想要的吗？ http://jsfiddle.net/XjthT/124/

我在img和标题周围增加了一个范围：

section figure span{
    display: inline-block;
    position: relative;
}