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

【问题标题】：Resizing images to cover % of div by surface area调整图像大小以按表面积覆盖 div 的百分比
【发布时间】：2017-06-02 18:07:00
【问题描述】：

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

但是，要放入其中的图像没有相同的纵横比。我想调整图像大小以覆盖相同的表面区域，无论尺寸如何。

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

从数学上讲，我至少了解一种方法：图像尺寸 * sqrt((图像宽度 x 图像高度) / (0.25)(div 宽度 x div 高度))。然而，我正在努力使用 Angular 的代码。

有什么建议吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：