Question

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

然而，放入其中的图像没有相同的宽高比。我想调整图像大小以覆盖相同的表面区域，无论尺寸如何。

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

在数学上我至少了解如何做到这一点：图像尺寸* sqrt（（图像宽度x图像高度）/（0.25）（div宽度x div高度））。然而，在Angular的代码中，我正在努力。

有什么建议吗？

Answer 1

如果可能，我会尝试使用CSS。浏览器渲染它会更轻松，并且更容易实现。

要执行此操作，请在模板中创建框，每个框都将图像作为背景。您可以使用框中的ng-style属性进行设置。

在CSS中你可以这样做：

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