Maintained ratio of images in mobile

src/app/infobox/infobox.component.css

@@ -1,7 +1,12 @@
 img{
+  width: 100%;
+  height: 100%; 
+  max-height: 150px;
   border-radius: 8px;
+}
+.info-img{
   width: 40%;
-  height: 150px;
+  height: 40%;
   float: right;
   margin-right:10px;
   margin-top:-50px;

src/app/infobox/infobox.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="this.description" class="card" [hidden]="!isVisible" [style.color]="themeService.cardColor">
     <div>
-      <h2><b [style.color]="themeService.cardColor">{{this.title}}</b></h2><img *ngIf="this.image"  src={{this.image}}>
+      <h2><b [style.color]="themeService.cardColor">{{this.title}}</b></h2><div class="info-img"><img *ngIf="this.image"  src={{this.image}}></div>
       <p [style.color]="themeService.descriptionColor">{{this.description | slice:0:600}}<a [style.color]="themeService.linkColor" href='https://en.wikipedia.org/wiki/{{this.title}}'>..More at Wikipedia</a></p>
     </div>
 </div>