Я использую следующий код * для отображения однострочной галереи:
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-элементов.
У кого-то появилась идея? Или нет альтернативы абсолютному позиционированию?
Обратите внимание на поведение масштабирования, которое необходимо сохранить. Это описано в одном из моих предыдущих вопросов или можно увидеть в этом Скриншоте.
* Еще раз спасибо Джеймсу Монтату за помощь!
поместите свои изображения в качестве фонового изображения вашего класса ".img-wrap", я ставлю jsfiddle demo здесь, посмотрите его
'JSFiddle'
: http://jsfiddle.net/Rgp6h/14/
position: absolute
так как это чувствительное к браузеру CSS-свойство.