0

編集: minitech のおかげで、以前よりもずっと近くで動作するようになりました。背景サイズに「カバー」を使用し、ズームイン/ズームアウト時にサイズが変更されなくなりましたが (期待どおり)、画像も大きすぎます。これを回避する方法はありますか？

再度、感謝します。

...

元の投稿:

左の列を、ユーザーが閲覧している解像度の高さの 100% と幅の 30% を占める画像にしたい Web サイトを作成しています。また、ズームイン/ズームアウトする場合は、ブラウザの高さ全体を維持するように画像のサイズを変更したいと思います。

次のJavaScriptを使用して、含まれるdivの幅/高さをピクセル単位で設定し、残りをパーセンテージで調整してみました:

document.write('<div id="container" style="width: ' + window.innerWidth + 'px; height: ' + window.innerHeight + 'px;">');

私が予想していたようには機能せず（寸法を再調整していません）、テストしたいくつかのブラウザー/解像度（特にiPad）での表示の高さよりも高いか短いです。

サイトはhttp://lesliecampbellweddings.com/です。

どんな助けでも大歓迎です！

ありがとう

4

2 に答える 2

0

ほとんどの場合、JavaScript は必要なくbackground-attachment:fixed;、左側の列に使用するだけで済みます。

この動作デモをチェックしてください: http://jsfiddle.net/ckukT/

この例の HTML は次のとおりです。

<div id="wrapper">
    <div id="left-col">
    </div>
    <div id="right-col">
        <p>Random text and content that would be needed goes here</p>
    </div>
</div>​

そして、ここにそれぞれのCSSがあります:

#wrapper {height:100%; width:100%;}

#left-col {
    background: url("http://www.lesliecampbellweddings.com/images/brideAndGroom.jpg") top center fixed no-repeat;
    width:50%;
    height:900px;
    float:left;
}

#right-col {
    background: yellow; /* so you can see it*/
    width:50%;
    height:900px;
    float:left;
}

</p>

背景の配置にセンタートップの代わりに固定ピクセルを自由に使用できますが、センターはブラウザーの幅やサイズに関係なく写真を中央に維持し、トップは常にトップを表示するように維持します-常にセンターセンターを使用できます表示されている画像の中央が必要です。あなたはこれで遊ぶことができますが、理想的には、彼女の顔を常に見せておくと思います.

于 2012-11-07T20:50:59.333 に答える
0

おそらく絶対配置を使用できます：

#container {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 30%;
}

これがデモです。

于 2012-11-07T15:47:41.573 に答える