title: How to make an element's height equal to its width in Ionic?
body: <p>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.</p>
  
  <p>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.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ion-view view-title="Home" &gt;
    &lt;ion-content class &gt;
      &lt;div  id = "card"  ng-model = "card"&gt;
        &lt;h3&gt;{{card.name}}&lt;/h3&gt;
  
      &lt;/div&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#card{
      background-image: url("/img/education.png");
      background-size:  100% 100%;
      width : 100%;
  }
  </code></pre>
  
  <h2>Javascript (controllers.js) </h2>
  
  <pre><code>.directive("card", function($scope) {
     console.log("Card directive called.");
     return {
          restrict: "E",
          link: function (scope, element) {
              console.log("Link Called");
              element.height = element.width;
          }
     }
  })
  </code></pre>