image - 如何让响应式图片和字幕和谐相处？

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%，但似乎没有办法让字幕做相同:

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

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

换句话说，自动边距 应该消失。 (水平边距会在狭窄的视口(viewport)上浪费空间。)

Answer 1

要将 figcaption 绑定(bind)到 img 的宽度，您需要将它们都包裹在一个元素内，该元素将折叠到 的宽度code>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 .

您可能希望调整此 div 的 overflow 属性，并且显然要根据口味进行调整。但是如果你想将 figure 元素保持为 100% 宽度，那么你需要另一个元素来包含 img 和 figcaption 以约束figcaption 的宽度为 img 的宽度。