如何在离子中响应图像？

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