Javascript 如何制作元素'；s的高度等于它的宽度，单位为？

我正在用Ionic制作一个应用程序，我想要一个正方形的图像作为背景。图像需要根据不同的分辨率进行缩放；我希望它填充设备的宽度，然后在保持纵横比的情况下，它在该宽度处的高度是多少

我尝试添加一个指令，以计算要设置的正确高度，但我无法让它做任何事情，它似乎根本没有被调用

HTML Javascript（controllers.js）

---

背景图像不会像

那样定义元素的大小。您有两种选择：

使用

元素而不是

背景图像

。这将导致元素根据图像的大小进行调整（假设图像为正方形）

使用一些棘手的CSS。假设您希望

.square

元素为其宽度的50% 父母亲将其宽度指定为

50%

，高度指定为

0

，并 填充

50%的底部

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

---

这里有一个。

另一个css解决方案是

vw

units

100%的视口为100vw，因此将高度设置为100vw将使高度与视口宽度相同，从而生成方形图像

这是

---

以下是您在HTML中没有调用指令的

。它应该是“…”，但我宁愿使用（属性）而不是E（元素），因为“card”不是有效的HTML标记。您是否尝试过背景尺寸：100%自动？您可能还想试用backgroundsize:cover，但这取决于图像的初始格式。另外，背景位置：居中；可能会有帮助。谢谢Bonatoc，背景尺寸：100%自动；不起作用，背景尺寸也不起作用：很遗憾，封面。我尝试将指令更改为A属性，并将标记更改为，但出现以下错误：错误：[$injector:unpr]未知提供程序：$scopeProvider Oops。等一下。如果使用属性（A），则必须使用：。如果你使用“元素”，那么你必须做一个标记。这是一个很好的方法，我想说的是。这也适用于任何纵横比，在上面的例子中，将填充底部设置为25%将使长方形的一半高出宽度：-）这是一个非常方便的CSS技巧。在响应性强的站点上运行良好，并且比使用“标签”更有效。

#card{
    background-image: url("/img/education.png");
    background-size:  100% 100%;
    width : 100%;
}

.directive("card", function($scope) {
   console.log("Card directive called.");
   return {
        restrict: "E",
        link: function (scope, element) {
            console.log("Link Called");
            element.height = element.width;
        }
   }
})

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