How to make an element's height equal to its width in Ionic?

Question

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;
        }
   }
})

Answer 1

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.