使用 Angular 调整图像大小 2

Question

我收到了一堆图片 URLs，我正在我的网页上显示它们。默认情况下，我将所有图像设置为 <img height = "200px" width = "200px">

这个问题是有些图像无法缩放并且看起来被压扁了，我该如何动态缩放每个图像以使其看起来不被压扁而是变小。例如，如果我有一张 16:9 的图片，我希望它在缩小时保持该比例。

Answer 1

因此，您希望图像的宽度和高度为 200 像素，同时保持纵横比。

如果在html中设置高度和宽度，会导致图像不保持纵横比。而是使用 CSS.

<img class="myImg" />

In styles.css
.myImg {
    max-width: 200px;
    max-height: 200px;
}

Resize Images with Angular 2