HTML Angular 8 - 如何缩小 img

Question

我正在使用下面的 component.html 创建 PDF 画廊。除了 Angular *ngFor 循环外，它几乎是纯 HTML。显示 PDF 图标，每个图标都链接到特定文件。我的问题是 style="width: 100%;"，它意味着在换行到下一行之前最多显示四个 img。但是，副作用是 img 的尺寸变大了。如果您查看下面的 screenshots，顶部图像是使用 style="width: 25%;" 生成的，底部图像使用 100%。我喜欢 25% 的尺寸，但我希望标签位于图像下方，就像我们在 100% 尺寸中看到的那样。 PDF图片实际上是67px x 64px。

如何修复？

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>

截图

Answer 1

请使用以下代码。我在示例中使用了内联 CSS（您可以将它放置到您的 css 并从那里使用它）。这里我使用了 50px 的图片高度，你可以根据你的要求使用

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>

HTML Angular 8 - 如何缩小 img

HTML Angular 8 - How to scale an img down

html

angular8