2

私がこのフォーラムを使用するのはこれが初めてです。通常、私はいつも自分で質問せずにここで答えを見つけます。ですから、間違いを犯した場合は、お詫び申し上げます。私がやろうとしていることは次のとおりです。cssを介してウィンドウサイズ（100％）に適合するヘッダーがあります。（高さはjqueryによって変更されますが、この質問には関係ないと思います）。このヘッダーには、画面の中央に表示したい画像があります。このように（私はこのフォーラムに画像を置くことは許可されていません）：

 <----------------image------------------>
 __________ ____________________ __________
|          |                    |          |
|  REST    |                    |   REST   |
|        IM|AGE  IMAGE IMAGE  IM|AGE       |
|__________|____________________|__________|
           |                    |
           |____________________|
             <-----screen------>

REST = not visible (outside the screen)

したがって、画面が大きくなると、より多くの画像が表示されますが、それでも中央に完全に配置されます。これまでのところ、私が行ったことはすべてうまくいきました。

次のコードを作成しました。

 <div id="header">
    <div id="header_bg"><img src="pics/headerbg.jpg" id="stretch"></div>
    <div id="logo">
            <div class="logo"><img src="pics/logo.png" width="401" height="174"></div>
    </div>
 </div>

およびjquerycode：

if ( $("#stretch").width() > $(window).width()  ) {
            $screen = $(window).width();
            $pic = $("#stretch").width();
            $rest = $pic - $screen;
            $margin = $rest /2;
            $margin = $margin - $margin - $margin ;
            $('#stretch').css({'margin-left':($margin)+'px'});
        }

ご覧のとおり、これは問題なく機能しますが、初めてページをロードすると、画像が非表示になりすぎて、右側に空きスペースができてしまいます。

誰かが私が間違っていることを知っていますか？

4

2 に答える 2

2

私が本当にあなたを理解しているかどうかはわかりませんが、画面の中央に画像を配置するだけでよい場合は、中央の位置で Css プロパティの背景を使用できます。

<style>
   #header_bg { background: url('pics/headerbg.jpg') no-repeat center 0; }
</style>

 <div id="header">
    <div id="header_bg">&nbsp;</div>
    <div id="logo">
            <div class="logo"><img src="pics/logo.png" width="401" height="174"></div>
    </div>
 </div>
于 2012-10-03T14:18:36.123 に答える
0

前述の David Slavik のコードに基づいた次のコードにたどり着きました。解決策をありがとう、デビッド。

<style>
  #header_bg { 
    background: url('../pics/headerbg.jpg') no-repeat center center;
    -webkit-background-size: cover; /*for webKit*/
    -moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
    background-size: cover; /*generic*/ }
</style>

このコードは、画像が div の高さよりも小さい場合、画像が少し伸びることを確認します。回答ありがとうございます。私にとって、このトピックは閉じられています。

于 2012-10-04T07:55:08.683 に答える