最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to make an element's height equal to its width in Ionic? - Stack Overflow

programmeradmin0浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 6

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

发布评论

评论列表(0)

  1. 暂无评论