Angularjs 按表面积调整图像大小以覆盖div的百分比

我正在开发一款爱奥尼亚应用程序。我有一个两列的正方形布局，例如，假设它们是100x100。我想重新缩放这些正方形内的图像，然后将其居中（水平和垂直）

但是，要放入其中的图像没有相同的纵横比。我想调整图像的大小以覆盖相同的表面积，而不考虑尺寸

再次，例如，假设我希望每个图像覆盖网格中25%的正方形。如果我有一张1000x1000的图像，它的大小将调整为50x50，以覆盖正方形内25%的面积。如果我有一个500x250的图像，它的大小将调整为~70x35

从数学上讲，我至少了解一种方法：图像维度*sqrt（（图像宽度x图像高度）/（0.25）（div宽度x div高度））。然而，在Angular的代码中，我很挣扎

---

有什么建议吗？

如果可能的话，我会尝试使用CSS。浏览器渲染这一点会更轻松，您也更容易实现

为此，在模板中创建框，每个框将有一个图像作为背景。您可以使用框上的

ng style

属性来设置

在CSS中，您可以执行以下操作：

.image-box {
    width: 50px;
    height: 50px;
    background-size: cover;
}

---

我感谢你的回应！我考虑过这样的方法，但它会导致方形图像（20x20）看起来比矩形图像（比如10x20）大很多。