使用引导程序，图像超出了我的专栏

Question

我没有使用CSS作为样式，但是我使用了bootstrap 3 *。我创建了一个处理表单的列。我想将图像放置在它的下面，但是当我渲染图像时，它从列中消失了。

这就是我在.html中编码的方式

<div class="col-md-3" *ngIf="showForm">
    <mat-card>
      <mat-card-content>
        <form [formGroup]="form">
          .
          .
          .
          .
          .
            <div class="col-md-12">
              <mat-form-field>
                <mat-select
                  placeholder="Baranggay"
                  formControlName="BarangayCode"
                >
                  <mat-option
                    *ngFor="let b of barangayList"
                    [value]="b.BarangayCode"
                  >
                    {{ b.BarangayName }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <input
            type="file"
            class="form-control"
            accept="image/*"
            (change)="changeListener($event)"
          />
          <button
            mat-raised-button
            type="submit"
            class="btn btn-danger pull-right"
            [disabled]="form.invalid"
            (click)="updateProperty()"
          >
            Update Property
          </button>
          <button
            mat-raised-button
            type="submit"
            class="btn btn-warning pull-right"
            (click)="onCancel()"
          >
            Cancel
          </button>
          <div class="clearfix"></div>

          <div
            *ngIf="base64Image"
            class="img-responsive img-thumbnail"
          >
            <img
              *ngIf="base64Image"
              [src]="
                domSanitizer.bypassSecurityTrustUrl(base64Image)
              "
            />
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

能否请您告诉我如何正确执行此操作？谢谢。

Answer 1

如果我正确理解了您的问题，请尝试设置以下内容：

.img-responsive {
  max-width: 100%;
}