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

Question

我正在制作一款带有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;
        }
   }
})

Answer 1

背景图片不会像<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%;
   }
   

这是demo。

Answer 2

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

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

这是some more detail

这是browser support