「自動」の高さの100％幅の背景画像

私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に100％の幅になる製品の画像があります（デザインは常に端から端まで行くことを示しています）。画面の幅に応じて、画像の高さは明らかにそれに応じて調整されます。私はもともとimg（CSS幅100％）でこれを行いましたが、うまく機能しましたが、メディアクエリを使用して、さまざまな解像度に基づいてさまざまな画像を提供したいと思いました。たとえば、同じ画像の大きなバージョン。CSSでimgsrcを変更できないことはわかっているので、HTMLのimgタグではなく、画像にCSSの背景を使用する必要があると考えました。

背景画像のdivは背景を表示するために幅と高さの両方を必要とするため、これを適切に機能させることができないようです。明らかに「幅：100％」を使用できますが、高さには何を使用しますか？150pxのようなランダムな固定高さを設定すると、画像の上部150pxが表示されますが、固定高さがないため、これは解決策ではありません。私は遊びをして、高さがあれば（150pxでテスト）、「background-size：100％」を使用して画像をdivに正しく合わせることができることを発見しました。このプロジェクトはモバイルのみを対象としているため、最新のCSS3を使用できます。

以下に大まかな例を追加しました。インラインスタイルを失礼しますが、質問をもう少し明確にするための基本的な例を示したいと思いました。

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

コンテナdivにページ全体に基づいてパーセンテージの高さを指定する必要があるのでしょうか、それともこれを完全に間違って見ているのでしょうか。

また、CSSの背景がこれを行うための最良の方法だと思いますか？たぶん、デバイス/画面の幅に基づいて異なるimgタグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな製品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。

申し訳ありませんが、これは少し時間がかかりますが、このプロジェクトから次のプロジェクトへと行ったり来たりしているので、この小さなことをやりたいと思います。よろしくお願いします。よろしく

を使用background-imageする代わりに、をimg直接使用して、ビューポートの幅全体に画像を広げることができます。使用してみてmax-width:100%;ください。メインのコンテナdivにパディングやマージンを適用しないでください。コンテナの合計幅が大きくなります。このルールを使用すると、画像の幅をブラウザの幅と同じにすることができ、高さもアスペクト比に応じて変化します。ありがとう。

編集：ウィンドウの異なるサイズで画像を変更する

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

このようにして、ブラウザのさまざまなサイズで画像を変更します。

ティムS.は、現在受け入れられている答えよりも「正しい」答えにはるかに近かった。cover（画像を側面から伸ばすことができる）またはcontain（画像をまったく伸ばすことができない）を使用する代わりに、CSSで100％幅、可変高さの背景画像を作成したい場合は、次のようにCSSを設定します。

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

これにより、背景画像の幅が100％に設定され、高さがオーバーフローします。JavaScriptに依存する代わりに、メディアクエリを使用してその画像を交換できるようになりました。

編集：私はちょうど（3か月後）あなたがおそらく画像をオーバーフローさせたくないことに気づきました。コンテナ要素のサイズを背景画像に基づいて変更したいようです（アスペクト比を維持するため）。これは、私が知る限り、CSSでは不可能です。

うまくいけば、すぐに要素で新しいsrcset属性を使用できるようになりますimg。img今すぐ要素を使用したい場合は、現在受け入れられている答えがおそらく最善です。

ただし、純粋にCSSを使用して、一定のアスペクト比でレスポンシブな背景画像要素を作成できます。これを行うには、次のように、heightを0に設定し、padding-bottomを要素自体の幅のパーセンテージに設定します。

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

さまざまなアスペクト比を使用するには、元の画像の高さをそれ自体の幅で割り、100を掛けてパーセンテージ値を取得します。これが機能するのは、垂直方向のパディングであっても、パディングの割合は常に幅に基づいて計算されるためです。

これを試して

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

簡易版

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

CSSプロパティbackground-sizeを使用して、好みに応じてcoverまたはcontainに設定できます。カバーはウィンドウ全体をカバーしますが、コンテインは片側がウィンドウにフィットするため、ページ全体をカバーしません（画面のアスペクト比が画像と等しい場合を除く）。

これはCSS3プロパティであることに注意してください。古いブラウザでは、このプロパティは無視されます。または、javascriptを使用して、ウィンドウサイズに応じてCSS設定を変更することもできますが、これはお勧めできません。

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

2色の背景画像を使用するだけです。

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

cssを追加します。

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

そしてhtmlは：

<div class="bg-mg"></div>

CSS：背景画像を画面の幅と高さの100％に拡大しますか？

2017年ですが、まともなサポートがあるobject-fitを使用できるようになりました。divと同じように機能しますが、要素自体、および画像を含むすべての要素で機能します。background-size

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}