如何在离子中响应图像？

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

在您的 CSS 中进行这些更改：

#homecontent{

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

}

Answer 2

您可以使用：

#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 and http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

如何在离子中响应图像？

How to responsive image in ionic?

angular

cordova

ionic-framework