显示带有内联标题的图像集，同时保持高度比例答案

【问题标题】：Display set of images with caption inline while maintaining scale by height显示带有内联标题的图像集，同时保持高度比例
【发布时间】：2013-10-22 01:46:41
【问题描述】：

我正在使用以下代码*来显示单行图库：

HTML

<div class="stream-wrap">
    <span class="img-wrap">
        <img src="http://placekitten.com/200/300" class="vertical"/>
        <span class="img-caption">Blah!</span>
    </span>
    <span class="img-wrap">
        <img src="http://placekitten.com/500/200" class="horizontal"/>
        <span class="img-caption">Blah!</span>
    </span>
</div>

CSS

body, html {
    height: 100%;
}

.stream-wrap {
    height: 100%;
    white-space: nowrap;
}

.img-wrap {
    height: auto;
    position: relative;
    vertical-align: top;
}

img {
    height: 100%;
}

.img-caption {
    left: 0;
    position: absolute;
    bottom: -1em;
}

.vertical {
    max-height: 300px;   
}

.horizontal {
    max-height: 200px;
}

JSFiddle：http://jsfiddle.net/Rgp6h/1/

嗯，这行得通（在 FF 中），但我想知道是否有没有标题绝对定位的解决方案，因为我不喜欢干扰 HTML 元素的自然呈现。

有人有想法吗？还是没有绝对定位的替代品？

请注意需要维护的缩放行为。它在one of my earlier questions 中进行了描述，或者可以在此Fiddle 中看到。

*再次感谢James Montage 的帮助！

【问题讨论】：

我喜欢避免使用position: absolute，因为这是一个浏览器敏感的 CSS 属性。

标签： html css image inline caption

【解决方案1】：

把你的图片作为你的“.img-wrap”类的背景图片我把jsfiddle demo放在这里看看

'JSFiddle':http://jsfiddle.net/Rgp6h/14/

【讨论】：

感谢您的意见，但图片没有显示任何缩放行为，这是规格的重要组成部分。