带有 figcaption 匹配图像宽度的浮动图形。 CSS 解决方案适用于 Firefox 和 Chrome

Question

基本上我有一个浮动图像，它有一些基于正在加载的图像的任意大小（上限为某个最大宽度%），下面有一个标题。 （在示例中，我设置了一个固定大小只是为了演示。）

最初，我在让 figcaption 自动适应其上方图像的大小时遇到了问题。 我使用display: table-caption样式让它在 Firefox 中工作，但它在 Chrome 中中断。

<div>
  <figure>
    <img />
    <figcaption>This is some text. This is some text. This is some text. This is some text. This is some text.</figcaption>
  </figure>
</div>

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure {
  position: relative;
  max-width: 85%;
  margin: auto;
  display: block;
}
img {
  width: 300px;
  height: 150px;
  background: #000;
}
figcaption {
  display: table-caption;
  caption-side: bottom;
  width: 100%;
}

https://jsfiddle.net/45jk62s8/

在 Chrome 中，对我来说，figcaption 看起来都是皱巴巴的，与图像的宽度不同。

如果我将图形元素更改为display: table ，它在 Chrome 中有效，但在 Firefox 中无效。

figure {
  display: table;
}

https://jsfiddle.net/45jk62s8/1/

在Firefox中，对我来说，图不再水平居中，图标题宽度不受限制。 我尝试了width: fit-content但这不起作用，因为允许 figcaption 长时间运行。

我认为这与我用来使图形居中的包装器 div 有关，但目前我无法找到跨浏览器的解决方案。 图形确实需要固定和居中，这样即使后面的内容是可滚动的，图形也总是在页面中居中。

Answer 1

这个 CSS 似乎在 Firefox 和 Chrome 中创建了所需的 output。 它对所有组件使用table 、 table-cell和table-caption并删除标题上的 100% 宽度。

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
figure {
  position: relative;
  max-width: 85%;
  margin: auto;
  display: table;
}
img {
  width: 300px;
  height: 150px;
  background: #000;
  display: table-cell;
}
figcaption {
  display: table-caption;
  caption-side: bottom;
}