CODEWITHSUNDEEP
htmlangular2-template
AmmarMZ
AmmarMZ

Reputation: 45

Resize Images with Angular 2

I am getting a bunch of image URLs and I am displaying them in my webpage. By default I set all the images to have <img height = "200px" width = "200px">

The issue with this is that some images don't scale and look squished, how do I dynamically scale each image so that it doesn't look squished but is smaller. For example if I have a picture that is 16:9 I'd like it to keep that ratio when making it smaller.

Upvotes: 0

Views: 3910

Answers (1)

Kartik Sharma
Kartik Sharma

Reputation: 723

So, you want an image to have width and height of 200px, while maintaining aspect ratio.

If you set height and width in html, it will lead to image not maintaining the aspect ratio. Instead use CSS.

<img class="myImg" />

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

Upvotes: 1

Related Questions