3

我目前正在解决这个问题，我正在尝试为图像元素添加标题。如果标题的宽度大于图像，则标题应换行。

<figure class="caption">
    <a href="#" target="_blank">
        <img src="/sample_image" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap if it's width exceeds the width of the image</figcaption>
</figure>

正常情况下，像这样的一些 CSS 代码应该可以完成这项工作：

figure {
    display: table;
    width: 50px;
}
figcaption {
    display: table-row;
}

问题是，这不能与以下用于为移动设备自动缩放图像的 CSS 结合使用：

img {
    max-width: 100%;
}

所以这里提到的解决方案https://stackoverflow.com/a/617455/583569不起作用。我知道，这不是一个好的解决方案，但现在将所有图像转换为各种格式需要很长时间。

是否有可能的非 JS 解决方案来解决此问题？

4

2 回答 2

0

我认为这可能对您有用，但此解决方案有局限性。

如果这是您的HTML：

<figure class="caption">
    <a href="#" target="_blank">
        <img src="http://placehold.it/300x200" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap 
                if it's width exceeds the width of the image</figcaption>
</figure>

并应用CSS：

figure {
    display: inline-block;
    position: relative;
    border: 1px dotted gray;
}
figure a {
    display: inline-block;
}
figure img {
    vertical-align: top;
    width: 100%;
    margin-bottom: 70px;
}

figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    height: 70px;
}

参见小提琴演示：http: //jsfiddle.net/audetwebdesign/H3Ngz/

注释

主要问题是我们需要让 的宽度缩小以适应图像，使用缩小以适应其内容的元素figure并不难做到这一点。inline-block

但是，需要将figcaption图像包装起来以限制宽度。如果您通过设置使用绝对定位，则可以做到这一点width: inherit。

这导致了另一个问题，你如何处理 的高度figcaption？

如果标题下方没有内容，则可以简单地让它向下扩展，它不会与任何其他内容重叠。

但是，由于绝对定位，标题文本不在内容流中，因此当视口改变宽度时文本重排时，有办法允许其高度。

一个有限但可能的解决方法是为标题中的滚动条指定高度figcaption或允许滚动条。

问题是你不知道标题文本的长度......

一点点 jQuery 将修复这些限制的日志。

于 2013-08-27T13:00:37.090 回答
0

尝试这个 ：

figure {
    display: inline-flex;
    position: absolute;   
}

figure img {
    width: 100%;
    margin-bottom: 70px;
}
figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}
于 2020-07-15T05:36:26.830 回答