显示屏，字幕内嵌图片的集合，同时保持规模由高度

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他的帮助！

来源

2013-10-22 Thorsten

我以前不得到你需要 –

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

把你的图片作为你的“.IMG-包装”类的背景图片，我把的jsfiddle演示看到这里

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

来源

2013-10-22 05:55:08

感谢您的输入，但图片不显示任何缩放行为，这些规格的重要部分是什么。 – Thorsten

显示屏，字幕内嵌图片的集合，同时保持规模由高度

回答

相关问题