2

幅：自動、高さ：100％の水平レイアウトがありますが、画像のアスペクト比を維持するために本体またはコンテナが伸びていません。

この添付画像に見られるようなレイアウトが必要です。

ここに画像の説明を入力してください

これらの画像をパネルdivの背景として使用します。

これが私のコードです：

HTML

 <body>
      <div id="cover" class="panel">
      <img src=""/>
      </div>
      <div id="panel1" class="panel">
      <img src=""/>
      </div>
      <div id="panel2" class="panel">
      <img src=""/>
      </div>
      <div id="panel3" class="panel">
      <img src=""/>
      </div>
      <div id="panel4" class="panel">
      <img src=""/>
      </div>
 </body>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    width: auto;
    height: 100%;
}

.panel {
    width: auto;
    height: 100%;
    float: left;
}

.panel img {
    width: auto;
    height: 100%;
    z-index: -1;
}

このjsfiddleでも見ることができます。

.panelを左にフロートさせて、すべてを水平に表示しますが、コンテナーはすべてのパネルの幅に対応しておらず、パネルは互いに積み重なっているだけです。

注：修正したくないので、レスポンシブにする必要があります。

これが私が達成したいことの例です（jsfiddle）。

ご覧のとおり、垂直スクロールバーはなく、水平スクロールバーのみが表示されています。ビューポートのサイズを変更すると、画像の幅と高さが調整され、アスペクト比が維持されます。

4

4 に答える 4

2

元のフィドルの更新は次のとおりです：http： //jsfiddle.net/rsPRz/45/

元のコードにできるだけ近づけようとしています...

HTML

<html>
<body>
    <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

img {
    display: inline-block;
}
于 2012-09-26T13:02:16.940 に答える
1

幅と高さがウィンドウの幅と高さに等しい親divにそれらすべてを保持する必要があると思います

于 2012-09-26T10:21:18.847 に答える
0

あなたが示した例は、単一の画像を持っているのでうまく機能しています。複数の画像/divを使用している場合は、divの幅を均等に分割し、max-width:100%その中の画像に与える必要があります。

たとえば、私は4つのdivしか使用していません。このデモを確認してくださいhttp://jsfiddle.net/rsPRz/34/

于 2012-09-26T11:01:40.620 に答える
0

div.containerjQueryの助けを少し借りれば、うまくいくかもしれません。

更新されたリンク：http：//jsfiddle.net/rsPRz/37/

widthSum = 0;
$('.panel img').each(function() {
   widthSum += $(this).width(); 
});
$('.container').width(widthSum);

これはあなたにとって可能な解決策ですか？

于 2012-09-26T12:24:57.143 に答える