I am making an app with Ionic and I want to have a square image as a background. The image needs to be scaled for different resolutions; I want it to fill the width of the device and then be however high it is at that width while keeping the aspect ratio.

I have tried adding a directive in order to calculate the correct height to set but I can't get it to do anything, it doesn't seem to be called at all.

HTML

<ion-view view-title="Home" >
  <ion-content class >
    <div  id = "card"  ng-model = "card">
      <h3>{{card.name}}</h3>

    </div>
  </ion-content>
</ion-view>

CSS

#card{
    background-image: url("/img/education.png");
    background-size:  100% 100%;
    width : 100%;
}

Javascript (controllers.js)

.directive("card", function($scope) {
   console.log("Card directive called.");
   return {
        restrict: "E",
        link: function (scope, element) {
            console.log("Link Called");
            element.height = element.width;
        }
   }
})

I am making an app with Ionic and I want to have a square image as a background. The image needs to be scaled for different resolutions; I want it to fill the width of the device and then be however high it is at that width while keeping the aspect ratio.

I have tried adding a directive in order to calculate the correct height to set but I can't get it to do anything, it doesn't seem to be called at all.

HTML

<ion-view view-title="Home" >
  <ion-content class >
    <div  id = "card"  ng-model = "card">
      <h3>{{card.name}}</h3>

    </div>
  </ion-content>
</ion-view>

CSS

#card{
    background-image: url("/img/education.png");
    background-size:  100% 100%;
    width : 100%;
}

Javascript (controllers.js)

.directive("card", function($scope) {
   console.log("Card directive called.");
   return {
        restrict: "E",
        link: function (scope, element) {
            console.log("Link Called");
            element.height = element.width;
        }
   }
})

• javascript
• css
• angularjs
• angularjs-directive
• ionic-framework

• You're not calling the directive in your HTML. It should be "<card id = "card" ng-model = "card">...</card>", but I would rather use A (attribute) instead of E (element), since "card" is not a valid HTML tag. Did you try background-size: 100% auto; ? You may also want to try out background-size: cover, but that would depend on the inital format of your image. Also, background-position: center center; could help. – Christian Bonato Commented Aug 10, 2015 at 20:31
• Thanks Bonatoc, background-size: 100% auto; does not work and nor does background-size: cover unfortunately. I tried changing my directive to the A attribute and changing the tags to <card> but I got this error: Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- cardDirective – koreus737 Commented Aug 10, 2015 at 20:42
• Oops. wait a sec. If you use an attribute (A), you have to use : <div id = "card" ng-model = "card" card>. If you use "element", then you have to make a <card> tag. – Christian Bonato Commented Aug 10, 2015 at 20:49

2 Answers 2

A background image will not define the size of an element as an <img> would. You have 2 options:

1. Use an <img> element instead of background-image. This will cause the element to adjust to the size of the image (assuming the image is square).

2. Use a bit of tricky CSS. Assume you want the .square element to be 50% the width of it's parent. Assign it a width of 50%, a height of 0 and padding-bottom of 50%.

   .square {
     width:50%;
     height:0px;
     padding-bottom:50%;
     background-size:  100% 100%;
   }
   

Here's a demo.

Another css solution is vw units.

100% of the viewport is 100vw, so setting the height to 100vw will make the height the same as the viewport is wide, resulting in a square image.

Here's some more detail

Here's the browser support