web-dev-qa-db-ja.com

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

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

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

以下に大まかな例を追加しました。インラインスタイルを許してください。でも、私の質問をもう少し明確にするための基本的な例を挙げたいと思いました。

<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タグを提供するテクニックがあります。一般的な考え方は、ランディングページテンプレートはさまざまな商品画像で何度も使用されるため、これを可能な限り最善の方法で開発するようにする必要があります。

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

htmlcssbackground-imageresponsiveresponsive-images
76
Darryl Young

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>

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

15
maksbd19

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

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

これはあなたの背景画像を100％幅に設定し、高さがオーバーフローすることを可能にします。これで、JavaScriptを使用せずにメディアクエリを使用してその画像を交換できます。

編集：私はちょうどあなたがおそらく画像がオーバーフローしたくないことに気づいた（3ヶ月後）。あなたは、コンテナー要素をそのアスペクト比を保つためにbackground-imageに基づいてリサイズしたいようです。これは私が知る限りCSSでは不可能です。

うまくいけば、すぐにimg要素に新しい srcset 属性を使用できるようになるでしょう。今すぐ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を掛けてパーセント値を求めます。縦方向のパディングであっても、パディングのパーセンテージは常に幅に基づいて計算されるため、これは機能します。

196
cr0ybot

これを試して

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;
}
16
Mo.

必要に応じて、CSSプロパティbackground-sizeを使用して、それをcoverまたはcontainに設定できます。 coverはウィンドウを完全に覆いますが、containsは片面をウィンドウに合わせてページ全体を覆わないようにします（画面の縦横比が画像と同じでない限り）。

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

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

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

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

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％に伸ばす？

2
Tariq Javed

それは2017年です、そして今、あなたは きちんとしたサポート を持つ object-fit を使うことができます。 divのbackground-sizeと同じように機能しますが、要素自体と、画像を含むすべての要素に対して機能します。

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
2
Nick
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
1
M N