0

1358 × 218 のヘッダー画像があります。大きな画面では、画面の幅に収まりません。アスペクト比を維持しながら画像を拡大縮小して、幅が常にブラウザーの幅の 100% になるようにします。ここに私が現在持っているコードがあります:

http://jsfiddle.net/qD5n5/

どうすればこれを達成できますか？

4

3 に答える 3

1

背景画像のサイズは変更できません。次のようにする必要があります。

<div id="header" style="oveflow: hidden; height: 50px /*your fixed height*/">
  <img src="background.jpg" style="max-width: 100%" />
</div>

これにより、アスペクト比とオーバーフローを維持したまま画像が 100% に引き伸ばされます。

ここにフィドルがあります：http://jsfiddle.net/kumiau/qD5n5/1/

于 2012-10-14T17:55:07.293 に答える
1

最新のブラウザー (IE >= 9 およびその他のブラウザー) では、 を使用できますbackground-size: cover。それ以外の場合は<img>、CSS 背景の代わりにタグを使用して画像を表示するなど、マークアップを変更する必要があります。

于 2012-10-14T17:53:46.457 に答える
-1

高さを削除するだけです。幅を設定して高さを設定しない場合、ブラウザはアスペクト比を維持します

  #header {
    background-image:url('http://i.imgur.com/RvQdH.jpg');
    width:100%;        
    margin-left:auto;
    margin-right:auto;
    background-position:center;
    background-repeat:no-repeat;
   }​

これらの CSS 設定を実際の<img>タグに使用してください。ブラウザの div ではなく、適切にサイズ変更してください

于 2012-10-14T17:53:13.423 に答える