レスポンシブな背景 - ホームページの高さは100％ですが、画像はモバイルサイズではカバーされません

Question

#home 
    height: 100% 
    width: 100% 
    background-image: url("/lib/img/home.jpg") 
    background-position: center center 
    background-repeat: no-repeat 
    background-attachment: fixed 
    background-size: cover 

私はCSS用にSASSを使用しています。

問題は私のホームランディングページをフルスクリーンサイズにして応答性にすることです。全画面でうまく動作する風景画像がありますが、モバイルサイズではその高さが画面全体に適合しません。これにはよりよい解決策がありますか？

Answer 1

img_background { 
     max-width: 2000px; // maximum width for the backgound pic 
     min-width: 100px; // for mobile phones in portrait view 
     position: absolute; 
    } 

このコードは応答しますので、PCのブラウザウィンドウのサイズを変更すると、ブラウザの幅に画像のサイズが変更されます。モバイルデバイスでは、画像全体が表示されます。

私はこれが助けて欲しい！

（EDIT：これはCSSで）

Answer 2

あなたが応答あなたの要素を行うためのブートストラップを使用することができます。このようにして、要素サイズは解像度画面で変更されます。

応答のある固定幅のコンテナに.containerを使用します。

<div class = "container"> 
    ... 
</div> 

または：

<div class = "container-fluid"> 
    ... 
</div> 

または：

<div class = "container"> 
    ... 
</div> 

または：

<img class="img-responsive" src="your_image.jpg"> 

ブートストラップを使用して、よりソリューションが、基本的なものがあります。これらがあります。

詳細については、このリンクをチェックしてください：

Bootstrap

Answer 3

#home{ 
    height: 100vh; 
    width: 100%; 
    float: left; 
    background-image: url("/lib/img/home.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    /*Note background attachment fixed not work in mobiles accurately like ios and also on ipads... 
    USe background attachment scroll for the same...*/ 
    background-size: cover; 
}