I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full width of the device while maintaining its aspect ratio to determine its height.
Although I have attempted to incorporate a directive to calculate the correct height for the image, my efforts seem to be futile as the directive does not appear to be executing 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 initiated.");
return {
restrict: "E",
link: function(scope, element) {
console.log("Link activated");
element.height = element.width;
}
}
})