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

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>

In the CSS，我们设置了一些内容，但最重要的是，img设置了max-width: 100%，但似乎没有办法让字幕做同样的事情：< / p>

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

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

换句话说，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 Fiddle demo

您可能希望调整此overflow的{​​{1}}属性，并且显然可以根据品味进行调整。但是，如果您希望将div元素保持为100％宽度，则需要另一个元素来包含figure和img，以便将figcaption的宽度限制为那是figcaption。

Answer 2

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

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

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