javascript - ブラウザの幅に基づいて大きな画像の背景を伸ばす最も簡単な方法は?

Question

www.joinbunch.comにアクセスしてブラウザのサイズを変更すると、サイズを変更すると背景画像が非常に適切に拡大縮小されることがわかります。

これを達成するための最良の方法は何ですか？

Answer 1

最も簡単な方法は css を使用することbackground-size coverです。これにより、画像が拡大縮小され、領域全体がカバーされます。

 #myelement {
     background: url(myback.png) cover;
 }

完全な構文:

 #myelement {
     background-image:url(myback.png);
     background-size:cover;
 }

Answer 2

画像を含む の背景画像には、... またはその他のパーセンテージ<div>の属性が必要です。width100%

もう少し説明すると：

このリンクを確認して ください http://css-tricks.com/perfect-full-page-background-image/

CSS3経由

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

「いつもの」方法

HTML マークアップ

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS マークアップ

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

また、デモも提供しています。

http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

そのページをお勧めします。css のトリックがたくさんあります。

それが役に立てば幸い！