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;
}
}
})
Share
Improve this question
edited Aug 10, 2015 at 20:29
Huangism
16.4k7 gold badges50 silver badges75 bronze badges
asked Aug 10, 2015 at 20:28
koreus737koreus737
6713 gold badges9 silver badges18 bronze badges
3
- 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
Reset to default 6A background image will not define the size of an element as an <img>
would. You have 2 options:
Use an
<img>
element instead ofbackground-image
. This will cause the element to adjust to the size of the image (assuming the image is square).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 of50%
, a height of0
and padding-bottom of50%
..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