如何使元素的高度等于离子中的宽度?

时间:2015-08-10 20:28:14

标签: javascript css angularjs angularjs-directive ionic

我正在制作一款带有Ionic的应用程序,我希望将方形图像作为背景。需要根据不同的分辨率缩放图像;我希望它能够填充设备的宽度,然后在保持宽高比的同时保持高宽度。

我已经尝试添加一个指令来计算要设置的正确高度,但是我无法做任何事情,它似乎根本就没有被调用。

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

2 个答案:

答案 0 :(得分:5)

背景图片不会像<img>那样定义元素的大小。您有两个选择:

  1. 使用<img>元素代替background-image。这将导致元素调整为图像的大小(假设图像是方形)。

  2. 使用一些棘手的CSS。假设您希望.square元素的宽度为其宽度的50% 家长。为其指定宽度50%,高度为0和 padding-bottom 50%

    .square {
      width:50%;
      height:0px;
      padding-bottom:50%;
      background-size:  100% 100%;
    }
    
  3. 这是demo

答案 1 :(得分:3)

另一个css解决方案是vw个单位。

100%的视口是100vw,因此将高度设置为100vw会使高度与视口宽度相同,从而产生方形图像。

这是some more detail

这是browser support