Image 如何使反应灵敏的图像和字幕和谐相处？

在这种情况下，图像符合响应性设计，但标题没有随之调整

这在代码中是有意义的，但是如果不在像素值中设置

max width

，怎么做呢

在一个

部分中有两个图像，每个图像位于带有
figcaption的
图形中：

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


说明文字
说明文字

，我们设置了一些内容，但最重要的是，
img
设置了
max width:100%
但似乎没有办法让字幕也这样做：


在考虑旧浏览器的情况下，如何在响应性设计中避免这种重叠？除了在
图
或
部分
元素上设置
最大宽度：300px



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

换句话说，
自动边距
应该消失。（水平边距会在狭窄的视口上浪费空间。）
要将
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>


您可能希望调整此
div的
溢出
属性
，并根据口味进行调整。但是，如果您想将
图形
元素保持为100%宽度，那么您需要另一个元素来包含
img
和
figcaption
，以便将
figcaption
的宽度限制为
img
我不确定是否完全理解您想要实现的目标，但这就是你要找的吗

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

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

谢谢大卫，这很有道理。但是，当屏幕缩小时，图像被切断，
溢出
解决方案仅启用滚动条。另外，我在原来的问题中添加了一个更新。因此，您希望图像本身缩小，以响应缩小到更小的视口？是的。在较大的视口中，它们的宽度不应超过100%，标题也不应超过100%。（我注意到，除了在
图
或
部分
元素上设置
最大宽度：300px
之外，您小提琴中的标题现在被底部的一些
px
偏移了-可能是因为div是一个
内联块
对吧？）@Baumr Oh抱歉，我没有看到那部分。用新方法更新了答案。
section figure span{
    display: inline-block;
    position: relative;
}