Отображение набора изображений со встроенными подписями с сохранением масштаба по высоте

Я использую следующий код * для отображения галереи с одной строкой:

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.

У кого-нибудь есть идея? Или альтернативы абсолютному позиционированию нет?

Обратите внимание на поведение масштабирования, которое необходимо поддерживать. Это описано в одном из моих предыдущих вопросов или можно увидеть в этом Fiddle.

* Еще раз спасибо James Montage за помощь!


person Thorsten    schedule 22.10.2013    source источник
comment
Мне нравится избегать использования position: absolute, так как это CSS-свойство, зависящее от браузера.   -  person Thorsten    schedule 24.10.2013


Ответы (1)


поместите свои изображения в качестве фонового изображения вашего класса «.img-wrap». Я поместил демонстрацию jsfiddle здесь, посмотрите.

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

person jignesh kheni    schedule 22.10.2013
comment
Спасибо за ваш вклад, но фотографии не показывают никакого масштабирования, что является неотъемлемой частью спецификаций. - person Thorsten; 24.10.2013