我有一个带标题的响应式幻灯片布局。
我试图让标题与图像宽度相同。问题在于，图像在垂直方向上缩放以适应浏览器大小，我的标题获取的是缩放前的图像宽度。 Fiddle
为了更加清晰，以下是我确切需求的简要概述：
我试图让标题与图像宽度相同。问题在于，图像在垂直方向上缩放以适应浏览器大小，我的标题获取的是缩放前的图像宽度。 Fiddle
#big_container {
display:block;
position:relative;
width:100%;
padding-bottom:40%;
white-space:nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
#big_container>div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.little_container {
display:inline-block;
height:100%;
width:100%;
text-align:center;
}
#big_container figure {
display:inline-block;
height:100%;
margin:0;
}
figure img {
max-height:calc(100% - 40px); /* subtract height of caption */
}
figcaption {
display:block;
width:100%;
text-align:left;
box-sizing:border-box;
margin:0;
padding:10px;
line-height:20px;
background-color:#ddd;
}<div id="big_container">
<div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/500/440">
<figcaption>
have a kitty!!1
</figcaption>
</figure>
</div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/450/400">
<figcaption>
moar kitty!
</figcaption>
</figure>
</div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/300/440">
<figcaption>
too many kitty..
</figcaption>
</figure>
</div>
</div>
</div>如何创建一个基于流体图片宽度缩放的标题？
我希望得到一个纯CSS的解决方案。
更新
我尝试过部分在Chrome和Opera中工作，但表现出一些奇怪的行为。
我没有找到任何关于这个问题的错误报告，但我不禁想知道这是否可以被认为是浏览器中的一个错误。
为了更加清晰，以下是我确切需求的简要概述：
- 标题元素必须与图像宽度相同（最好能够将标题文本左对齐或右对齐到图像边缘）
- 图像不能被裁剪或拉伸
- 图像和标题都必须适应其容器（可能是流体的），尽可能利用更多空间。
- 上述规则应适用于任何尺寸的图像
- 仅使用CSS（与旧浏览器兼容性不是主要问题，但这是一个优点）
<figure>设置为display:inline-block;，因此它会扩展到最宽的子元素的尺寸...当图像非常小的时候，它就是字幕。如果将字幕更改为单个字符，您会明白我的意思，我想。https://jsfiddle.net/0xmtq77z/1/在文本比图像更宽的情况下，你希望发生什么？你想让文本换行还是被修剪或其他操作？ - ryantdecker