Display set of images with caption inline while maintaining scale by height

Question

I'm using the following code* to display a one-row-gallery:

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/

Well, this works out (in FF), but I wonder if there's a solution without absolute positioning of the caption, since I don't like to interfere with the natural rendering of HTML elements.

Anyone got an idea? Or is there no alternative to absolute positioning?

Please be aware of the scaling behavior, which needs to be maintained. It's described in one of my earlier questions or can be seen in this Fiddle.

*Thanks again to James Montage for his help!

I like to avoid the use of `position: absolute` since this is a browser-sensitive CSS-property. — Thorsten, Oct 23 '13 at 22:14

score 0 · Answer 1 · answered Oct 22 '13 at 05:55

0

put your images as background image of your ".img-wrap" class i put jsfiddle demo here see it

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

answered Oct 22 '13 at 05:55

jignesh kheni

1,282
1
9
22

Thanks for your input, but the pics don't show any scaling behavior, what's an essential part of the specs. – Thorsten Oct 23 '13 at 21:56

Display set of images with caption inline while maintaining scale by height

1 Answers1