0

画像をブラウザの幅 100% に拡大しようとしていますが、どこかで間違っているようです。

これがフィドルです。

最後にコードを追加します。

似たようなものを見つけましたが、検査時にコードを理解できません。

そして、彼らはどのようにして画像をブラウザに適応させているのでしょうか?

彼らはJqueryを使用していますか？

前もって感謝します。

コード –</p>

HTML:

<div id="header">
   <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Collin Hughes">
</div>
    <div id="outer" >
        <div id="inner"></div>
</div>
    </body>

CSS:

body, html {
     margin: 0;
     width: 100%;
     }

#header{
     position: relative;
     width: 100%;
     height:auto;
     background-size: 100%;
     margin: 0;
     }

#outer{
     position: relative;
     width: 90%;
     height: 500px;
     background-color: red;
     margin-top:30px;
     margin-right: auto;
     margin-bottom: 30px;
     margin-left: auto;
     padding: 20px 0 0 0;


}

#inner{
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
     top: 20px;
}
4

2 に答える 2

2

画像の幅を設定するのではなく、#header.
以下を追加して修正できます。

#header img{
    width: 100%;
}

これにより、ブラウザのサイズを変更しても幅が常に 100% になります。
結果ボックスのサイズを変更することで、以下の更新されたフィドルで試すことができます。

デモを見る

于 2012-08-12T19:21:36.600 に答える
1

画像をターゲットにするには、これを CSS に追加する必要があります。他のサイトもそうしています。

  #header img { width:100% }
于 2012-08-12T19:21:33.830 に答える