angular - イオンで画像をレスポンシブするには?

Question

ホームページに背景画像を追加する必要があるという点で、イオンアプリを作成しています。画像サイズは1280*698です。

以下のコードを試してみましたが、

CSS:

#homecontent {
  background-image: url('../img/home2.png') !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

HTML:

<ion-content id="homecontent"></ion-content>

私の問題は、背景画像が反応しないことです。どうやってやるの？

Answer 1

あなたが使用することができます：

#homecontent{
    background:url('../img/home2.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

背景画像の縦横比を維持したい場合、または:

#homecontent{
    background:url('../img/home2.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

背景画像の高さと幅を調整する必要がある場合

http://www.w3schools.com/cssref/css3_pr_background-size.aspおよびhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Answer 2

CSS で次の変更を行います。

#homecontent{

    background:url('../img/home2.png')no-repeat center center fixed !important;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;

}