97

私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に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タグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな商品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。

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

4

8 に答える 8

224

ティム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を掛けてパーセンテージ値を取得します。これが機能するのは、垂直方向のパディングであっても、パディングのパーセンテージは常に幅に基づいて計算されるためです。

于 2013-01-21T20:28:30.483 に答える
21

これを試して 

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;
}
于 2013-05-19T18:54:06.900 に答える
20

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

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

$(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>

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

于 2012-06-19T11:35:07.110 に答える
17

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

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

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}
于 2012-06-19T11:34:34.113 に答える
4

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

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>
于 2014-03-01T14:38:46.890 に答える
2

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-02-02T08:41:20.673 に答える
2

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

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
于 2017-10-21T06:15:27.837 に答える
1 
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
于 2018-08-11T09:51:25.820 に答える