1

レスポンシブな水平スクロールの画像リストを実装しようとしています。

例えば：

<ul>
  <li>
    <img src="image1.jpg"/>
  </li>
  <li>
    <img src="image2.jpg"/>
  </li>
  <li>
    <img src="image3.jpg"/>
  </li>
</ul>

画像は幅と高さの比率が不明です。

私の要件:

  1. 画像が常にブラウザ ウィンドウの 100% の高さになるようにします。
  2. それらを互いに隣接させたい（を使用せずにfloat;inlineおそらく最良の方法です）。
  3. ウィンドウのサイズ変更時に画像の幅と高さの比率を壊したくありません。
  4. ジャバスクリプトなし。

これまでのところ、この CSS を試してみましたが、ブラウザ ウィンドウのサイズが変更されたときに画像がつぶれないようには見えません。

ul{

  width:100%;
  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;

}

ul li{

  display:inline;

  height:100%;

}

ul li img{

  max-height:100%;
  width:auto;

}

テイカーはいますか？

編集：

私がどこにいるかの例として、簡単なフィドルをまとめました。

どんな助けでも素晴らしいでしょう...

4

2 に答える 2

2

よし、行きましょう。多くの実験を重ねた結果、最終的に、ほとんどのブラウザーにとっての答えであると思われるものを見つけました。Firefox 3.5 以降、Safari 4 以降、Chrome 3 以降で動作するようです。広範囲ではありませんが、iOS デバイス、Android デバイス、および IE でもテストしました。

*喉をクリア*

html, body{

  width:100%;
  height:100%;

}

html, body, ul, li{

  padding:0;
  margin:0;
  border:0;

  text-decoration:none;

}

ul{

  width:100%;
  height:100%; /* CHANGE */

  overflow-y:scroll;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;

}

ul li{

  display:inline;

  height:100%;

}

ul li img{

  max-height:100%;
  height:100%; /* CHANGE */
  width:auto !important; /* CHANGE */

}

主な要因は、(その宣言の上にある) を含め、heightプロパティが100%リストの最後のノードまでずっとあることを確認することです。imgmax-height

プロパティの!important後に宣言を追加すると、古いブラウザの方がうまくいくことにも気付きました。width:auto

このようなレイアウトに対する飢えの欠如に驚いているので、これが誰かを助けたなら、私に知らせてください.

于 2013-09-21T20:00:21.387 に答える