HTML Angular 8 - How to scale an img down - html

Question

I'm creating a gallery of PDF's using the component.html below. It's nearly pure HTML except for the Angular *ngFor loop. The PDF icons are displayed, each one linking to a specific file. My problem is with the style="width: 100%;", it is meant to show up to four img's before wrapping to next line. But, the side-effect is that the img's scale to a large size. If you look at the screenshots below, the top image was produced using style="width: 25%;", the bottom one using 100%. I like the 25% size, but I want the label's to be below the image, like we see in the 100% size. The PDF image is actually 67px x 64px.
How to fix?
component.html
<div class="row">
<div *ngFor="let doc of docs">
<a href="#/gallery" (click)="showDoc(doc)">
<p style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<img src="{{doc.img}}" style="width: 100%;"><b>{{doc.lbl}}</b>
</p>
</a>
</div>
<p style="clear: both;"></p>
</div>
screenshots

Answer 1

Please use the below code . I have used inline CSS for the example ( you can place it to your css & use it from the there). Here I have used 50px image height you can use as per your requirements
style="max-width: 100%; height:50px"
HTML:
<div class="container">
<div class="row">
<div *ngFor="let doc of docs" class="col-md-4">
<a href="#/gallery" (click)="showDoc(doc)" style="float: left; font-size: 14pt; text-align: center; width: 25%; padding-left: 10px;">
<span>
<img src="https://techterms.com/img/lg/pdf_109.png" style="max-width: 100%; height:50px"><b style="display: block;">{{doc.lbl}}</b>
</span>
</a>
</div>
</div>