1

img を横に並べた単純な水平 "nowrap" css でサイトをコーディングしました。スクロールバーも非表示にしました。横スクロールは、通常のマウスホイールの垂直スクロールで実行できます (私のプロジェクトの URL を参照してください)。

画像はすべて 1400x850px の高解像度であるため、ブラウザーのサイズに合わせて画像をスケーリングするサイトを作成したいと考えていました。現在、すべての画像は max-width:100% です。私の目的は、ブラウザーが小さいときに、そのパーセンテージ未満に縮小することです。

幅と高さの両方を自動で max-width:100% を使用してみました。機能していません。

jquery fluid images スクリプトを使用しようとしましたが、「nowrap」が原因でうまく機能しません

以下は私が使用しているメインコードです：

#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

これは私のプロジェクトのリンクです: http://credencepartners.com/demo02/

これは私が作成しようとしている結果です (たとえば、コメントを参照してください): http://credencepartners.com/demo02/interface/scene01.jpg

これに JavaScript を実装する必要がありますか、それともこのシナリオでは CSS が可能ですか?

更新 / 2012 年 8 月 10 日

Corey に感謝します。demo02 リンクを更新しました。問題は、画像の下にテキストを追加することだけです。div クラスを使用してテキストと画像を結合しようとしましたが、その結果、画像が再び非流動的になります。今、流動的でサイズ変更可能な div タグを作成するのに助けが必要です。

目標

典型的な水平方向の横スクロール Web サイトを構築することは非常に簡単です。私が抱えている主な問題は、上部にある流体のサイズ変更可能な画像のみです。私はその流動的/レスポンシブなレイアウトにかなり慣れていないので、ここの達人が私を啓発してくれることを願っています:)

4

2 に答える 2

1

この CSS を使用します。

body, html {
    width:100%;
    min-height:100%;
    height:auto !important;
}
#content {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio {
    width:100%;
    height:100%;
    position:relative;
}
#portfolio ul{
    width:100%;
    height:100%;
    display:block;
    white-space:nowrap;
    overflow:auto;
    list-style:none;
    padding:0;
    margin:0;
    text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
    width:auto;
    height:100%;
    display:inline-block;
    position:relative;
}

そして、次のように html をレイアウトします。

<div id="content">
    <div id="portfolio">
        <ul>
            <img src="src.jpg" />
            <img src="src.jpg" />
            <img src="src.jpg" />
        </ul>
    </div>
</div>
于 2012-08-08T07:57:14.800 に答える
0

少し試してみたところ、次のことがわかりました。

  1. 画像から高さと幅のタグを削除する必要があります
  2. jQuery/JavaScript を使用して、「ポートフォリオ」-div の高さをウィンドウの高さに設定します。

それだけです。あなたの言いたいことが理解できたと思います

于 2012-08-08T07:57:21.117 に答える