Resize Images with Angular 2

Question

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.

Kartik Sharma · Accepted Answer · 2017-12-01 08:09:34Z

1

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;
}

answered Dec 1, 2017 at 8:09

Kartik Sharma

7139 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Resize Images with Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related