0

次のコード*を使用して、1行ギャラリーを表示しています:

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 要素の自然なレンダリングを妨げたくないので、キャプションの絶対配置なしで解決策があるのだろうかと思います。

誰でもアイデアを得ましたか？または、絶対配置に代わるものはありませんか?

維持する必要があるスケーリング動作に注意してください。以前の質問の 1 つで説明されているか、このFiddleで確認できます。

* James Montageの助けに感謝します!

4

1 に答える 1

0

「.img-wrap」クラスの背景画像として画像を配置してくださいここにjsfiddleデモを配置してください

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

于 2013-10-22T05:55:08.800 に答える