web-dev-qa-db-ja.com

div全幅のレスポンシブ背景画像

Divのフル幅でレスポンシブな背景画像を作成する方法を見つけようとしています。 background-imageはページの幅全体に拡大します（応答します）が、imageの高さは最大の高さではありません。どういうわけか遮断されているようです。 bootstrapフレームワークを使用しています。これをしようとしている理由は、画像にテキストをオーバーレイしたいからです。さまざまなことを試しましたが、理解できないようです。助けて！

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }
htmlcsstwitter-bootstrapresponsive-designbackground-image
15
Drew

希望するデザインを取得する1つの方法を次に示します。

次のHTMLから始めます。

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

背景画像は、ドキュメントの通常のフローの一部であることに注意してください。

次のCSSを適用します。

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

仕組み

画像は、100％の幅で通常のフローコンテンツに設定されているため、親コンテナの幅に応じて自動的に調整されます。ただし、高さを450px以下にしたい場合、これは1200pxの画像幅に対応するため、画像の最大幅を1200pxに設定します。 display: blockおよびmargin: 0 autoを使用して、画像を中央に保持できます。

テキストは、絶対配置を使用して画像上にペイントされます。最も単純なケースでは、h1要素を親の幅いっぱいに引き伸ばし、text-align: centerを使用してテキストを中央揃えにします。上部または下部のオフセットを使用して、必要な場所にテキストを配置します。

バナー画像のアスペクト比が異なる場合は、jQuery/Javascriptを使用して.bg-image imgの最大幅の値を動的に調整する必要がありますが、そうでない場合、このアプローチには多くの利点があります。

デモを参照してください： http://jsfiddle.net/audetwebdesign/EGgaN/

14
Marc Audet

background-size: coverを使用すると、コンテナ全体を覆うように背景画像が自動的に引き伸ばされます。ただし、アスペクト比は維持されるため、画像と適用される要素のアスペクト比が同じでない限り、常に画像の一部が失われます。

これを解決できる2つの方法があります。

  • 行うアスペクト比を維持しないbackground-size: 100% 100%を設定することにより画像のこれはまた、画像がコンテナ全体をカバーするようにしますが、比率は維持されません。欠点は、画像が歪むため、画像によっては非常に奇妙に見える場合があることです。あなたがフィドルで使用している画像で、私はあなたがそれで逃げることができると思います。

  • また、javascriptを使用して要素の高さを計算および設定に基づいて、その幅に基づいて、画像と同じ比率を取得することもできます。この計算は、ロード時およびサイズ変更時に行う必要があります。数行のコードで十分簡単に​​なります（例が必要かどうかはお気軽にお尋ねください）。この方法の欠点は、（モバイルデバイスで）幅が非常に小さくなり、その結果、計算された高さもコンテナの内容がオーバーフローする可能性があることです。これは、コンテンツのサイズなどを変更することでも解決できますが、ソリューション/

7
Pevara

また、このスタイルをionicハイブリッドアプリの背景。

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

0
Code Spy