5

フォトストーリーのページを作成しようとしています。これは水平方向にスクロールすることを目的としていますが、画像を100％の高さと自動幅に拡大縮小する必要もあります（トリミングしないようにします）。水平スクロールと100％の高さ/自動幅は問題ありません。しかし、画像の間隔を適切に設定することはできません。画像は重なり続けています。参照： http： //i.imgur.com/nzOon.jpg

これは可能ですか？何年もの間これで働いていて、アイデアが不足しています。

ありがとう！

JS：

<script type="text/javascript" charset="utf-8">
    $(function(){
            $(".image").wrap("<td>");
    });
</script>

CSS：

.image {
position:absolute;
width:auto;
height:100%;
}

HTML：

<div id="page-wrap">
         <div class="image">
              <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>

         <div class="image" style="margin-left:75%;">
               <img src="images/Betty-001.jpg" id="image-contents" />  
         </div>             
</div>

4

2 に答える 2

4

HTMLを使用すると、スクロールと画像の幅が自動的に行われます。

デモ： http： //jsfiddle.net/ThinkingStiff/sVa7S/

HTML：

<div id="scroll">
       <img src="http://thinkingstiff.com/images/priorities.png" /><!--
    --><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS：

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top;
}
于 2012-06-09T20:32:06.210 に答える
1

次のCSSを使用できます。

html, body {
    width: 100%;
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#image1 {
    background-image: url('image1');
}
#image2 {
    left: 100%;
    background-image: url('image2');
}
#image3 {
    left: 200%;
    background-image: url('image3');
}
#image4 {
    left: 300%;
    background-image: url('image4');
}​

幅100％、高さ100％の背景画像を使用します。

ここで動作する実例を見ることができます

于 2012-06-09T20:12:10.120 に答える