3

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

在代码中是有道理的，但是如何在不设置max-width像素值的情况下完成呢？


单个 中有两个图像section，每个图像都包含在figurea 中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%设置了，但似乎没有办法让标题做同样的事情：

在此处输入图像描述

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


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

在此处输入图像描述

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

4

2 回答 2

2

要将 绑定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 小提琴演示。

您可能希望调整它的overflow属性div，显然，调整到口味。但是，如果您想将figure元素保持为 100% 宽度，那么您需要另一个元素来包含imgand figcaption，以便将 的宽度限制figcaption为img.

于 2012-11-05T18:00:11.603 回答
2

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

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

section figure span{
    display: inline-block;
    position: relative;
}
于 2013-08-28T10:55:18.917 回答