-4

私はウェブサイト開発が初めてです。Web サイトの背景画像をレスポンシブにする必要があります。それ、どうやったら出来るの？モバイルでもよく見られるはずです。現在、私は次のように私のウェブサイトに画像を表示しています：

<img alt="Goodfoo.me" src="http://goodfoo.me/background.jpg"
     id="full-screen-background-image" /> 
<style>
#full-screen-background-image {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
}
</style>
4

3 に答える 3

0

この方法が理にかなっているとは限りませんが、CSS に以下を追加してください。

img {
  max-width: 100%;
  height: auto;
}

ただし、テレビなどの非常に大きな画面でページを開くと、画像が拡大されないため失敗することに注意してください。アップスケーリングによる品質の低下を気にしない場合max-は、ルールの一部を削除するだけです。そうすれば、画像は常にコンテナの幅を埋めます。

これは、ページ上のすべての画像に影響することに注意してください。

于 2013-10-13T10:51:40.353 に答える
0

画像を画面の幅全体に表示したい場合は、次のように の代わりに設定するだけwidthです:min-width

#full-screen-background-image {
  z-index: -999;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%;
}
于 2013-10-13T10:51:57.623 に答える
0

背景画像を画面に合わせたい場合は、次を使用できます

background-image {
     width: 100%;
}

あなたのCSSで

于 2013-10-13T10:54:15.127 に答える