0

背景要素に問題があります。ブラウザの高さの 100%、幅が 20% 以上、幅が 40% 以下である必要がある 2 つの div、curtain_left と curtain_right があります。主な要件は、カーテンが高さの 100% にスケーリングされることです。

今、私は持っています

#curtain_left {
left: 0px;
min-width: 20%;
max-width:40%
height: 100%;
text-align: left;
z-index: -1;
position: fixed;
background-image: url(img/curtain_right.png);
background-size: 100%;
background-repeat: no-repeat;

最小幅にのみ注意を払っており、スケーリングされた高さに基づいて拡大していないようです。そのため、ワイドスクリーン モニターでは機能しますが、標準では、背景画像が 20% の幅に拡大され、下部にぎこちないスペースが残ります。

ここに画像の説明を入力

任意のヒント？

http://jsfiddle.net/kJbcj/1/

4

1 に答える 1

0

編集：jqueryソリューションを削除しました。

私はあなたが間違っていることを理解したので、それを投稿しました、まあ、すべての親要素と一緒にその要素に高さと最大高さを100％に提供しようとすると良いでしょう。例えば

HTML：

<div class="wrapper">
    <div id="curtain_left"></div>
</div>

CSS：

html, body, .wrapper, #curtain_left {
    height: 100%;
    max-height: 100%;
}

このコンセプトを試してみてください。

于 2012-06-21T12:57:54.540 に答える