1

一連の画像を持つフレーム内にギャラリーを作成しようとしています。ギャラリーの最初の画像ウィンドウの高さと、画像の縦横比を変えない対応する幅を持つ動的な画像を作成しようとしています。私はこのコードでそれを行うことができることを発見しました:

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
<img src="IMAGENAME.jpg" height="100%"/></div>

次に、この動的サイズの画像の右側に固定サイズの画像を追加し、その右側に別の画像を固定サイズなどで追加したい.

ウィンドウが異なる画面に表示されるので、静的画像が常に動的画像の境界に触れていることを望みます。

これを行うさまざまな方法を試しましたが、ほとんど行き詰まっています。誰か助けてもらえますか? 最も簡単な方法は、ウィンドウの高さを取得し、それを固定量 (アスペクト比) で乗算し、その量だけ他の画像をオフセットすることですが、その方法がわかりません。

助けていただければ幸いです。

4

1 に答える 1

1

次のコードを使用して、すべての画像を動的画像の横にフロートさせることができます。

<html>
<head>
<style type="text/css">
.thumbnail 
{
    float:left;
}
</style>
</head>

<body>
<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
    <img class="thumbnail" src="IMAGENAME.jpg" height="100%">
    <img class="thumbnail" src="img1.jpg">
    <img class="thumbnail" src="img2.jpg">
    <img class="thumbnail" src="img3.jpg">
    <img class="thumbnail" src="img4.jpg">
</div>
</body>
</html>
于 2012-04-18T06:38:35.790 に答える