如何在 Ionic 中使元素的高度等于其宽度？

Posted 2023-03-06

【中文标题】如何在 Ionic 中使元素的高度等于其宽度？

【英文标题】：How to make an element's height equal to its width in Ionic?

【发布时间】：2015-11-02 21:32:32

【问题描述】：

我正在使用 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;
        
   
)

【问题讨论】：

您没有在 HTML 中调用该指令。它应该是 "..."，但我宁愿使用 A（属性）而不是 E（元素），因为 "card" 不是一个有效的 HTML 标签。你试过 background-size: 100% auto; ?您可能还想尝试 background-size:cover，但这取决于图像的初始格式。此外，背景位置：中心中心；可以帮忙。

感谢 Bonatoc，背景尺寸：100% 自动；不起作用， background-size: 也不起作用。我尝试将指令更改为 A 属性并将标签更改为 但我收到此错误：错误：[$injector:unpr] Unknown provider: $scopeProvider

糟糕。等一下。如果使用属性 (A)，则必须使用：。如果你使用“元素”，那么你必须制作一个 标签。

【参考方案1】：

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

使用<img> 元素代替background-image。这将导致元素调整到图像的大小（假设图像是方形的）。

使用一些复杂的 CSS。假设您希望 .square 元素为其宽度的 50% 父母。为其分配宽度50%，高度0 和 50% 的填充底部。

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

这是demo。

【讨论】：

这是一种巧妙的做法

我正要这么说。

这也适用于任何纵横比，在上面的示例中将 padding-bottom 设置为 25% 会使长方形的一半高 :-)

这是一个非常方便的 CSS 技巧。在响应式网站中运行良好，并且比使用 ` 标记更高效。

【参考方案2】：

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

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

这里是some more detail

这是browser support