使用Angular 2调整图像大小

Question

我得到了一堆图像URLs，并将其显示在我的网页中。默认情况下，我将所有图像设置为<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;
}