【发布时间】：2016-02-08 20:20:59
【问题描述】：
我有一个响应式幻灯片式布局，每张图片下方都有标题。
我正在尝试使标题与图像的宽度相同。问题是图像被缩放以垂直适应浏览器，而我的标题是在缩放之前获取图像的宽度。
#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 解决方案。
更新
事实证明我的上述尝试partially works in chrome and opera, but exhibits some odd behavior。
我没有找到任何关于该主题的错误报告，但我不禁想知道这是否可能被视为浏览器中的错误。
为清楚起见，以下是我的确切要求的简要概述：
- 标题元素必须与图像的宽度相同（如果能够将标题文本左对齐或右对齐到图像的边缘，那就太好了）
- 不得裁剪或拉伸图像
- 图片和标题必须都适合它们的容器（可能是流动的），并使用尽可能多的空间。
- 以上规则应适用于任何尺寸的图像
- 仅 CSS（与旧浏览器的兼容性不是主要问题，但这是一个优点）
html 标记可以改变。
【问题讨论】：
-
从一个图像更改为另一个图像的代码在哪里？
-
@jsve 我打算稍后添加一些 javascript 来处理。我希望在纯 css 中进行布局的原因是，当禁用 javascript 时，所有图像仍然可以以与 javascript 工作时类似的方式查看。
-
看起来标题实际上与标题文本强制它们一样长（与缩放前的图像大小无关）。父元素
<figure>设置为display:inline-block;，因此它扩展为最宽的子元素的大小......当图像非常小时，这是标题。如果您将标题更改为单个字符，您会明白我的意思，我想。 jsfiddle.net/0xmtq77z/1在文字比图片宽的情况下，你想怎么办？您想要文本换行、修剪还是...？ -
@ryantdecker caption still seems larger than the image for me..？ （firefox）至于文本，修剪很好。我可能会在
.little_container上设置一个最小宽度，如果图像非常瘦，则允许标题更大，但对于我的使用，假设标题永远不会比图像长是可以接受的。 -
hmmm - 抱歉，我只在 chrome 中查看 - 似乎两者的行为不一致。