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

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 中，对我来说，图标题看起来都皱巴巴的，与图像的宽度不一样。

如果我将figure元素更改为

display: table

，它可以在Chrome中运行，但不能在Firefox中运行。

figure {
  display: table;
}

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

在 Firefox 中，对我来说，图形不再水平居中，并且 Figcaption 宽度不受限制。我尝试过

width: fit-content

但这不起作用，因为允许 Figcaption 长时间运行。

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

Answer 1

此 CSS 似乎在 Firefox 和 Chrome 中创建了所需的输出。它对所有组件使用

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;
}

Answer 2

此页面上的答案让我很接近！

但是，我希望图像保留其定义的宽度和高度并具有响应能力。

下面是我的简化代码，还添加了一些浅色样式和基于 CKEditor 的左、右、中心类。

figure {position:relative;display:table;}
figure img {display: table-cell;max-width: 100%;height: auto;}

/* add in your left, right, center styling */
.image-style-align-left {float: left; margin-right: 0.75rem;}
.image-style-align-right {float: right; margin-left: 0.75rem;}
.image-style-align-center {margin: 0.75rem auto;display: block;}

/* figcaption with some light styling */
figure figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: 0.8rem;
  padding: 0.65rem;
  background-color:#f3f5f6;
}