Angular2로 이미지 크기 조정

Question

이미지 URL이 많아지고 있으며 내 웹 페이지에 표시하고 있습니다. 기본적으로 모든 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; 
}