使用Angular2调整图像大小

Question

我收到一堆图片网址，我正在网页上显示这些网址。默认情况下，我将所有imgs设置为<img height = "200px" width = "200px">

这个问题是一些图像不会缩放并看起来像是压扁的，我如何动态缩放每个图像，使其看起来不会被挤压而是更小。例如，如果我的照片是16：9，我希望在缩小时保持这个比例。

Answer 1

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

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

<img class="myImg" />

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