时间戳

首页 > 解决方案 > 图像使用引导程序从我的专栏中消失

html - 图像使用引导程序从我的专栏中消失

问题描述

我没有使用 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>

你能告诉我如何正确地做到这一点吗？谢谢你。

标签： htmltwitter-bootstrap

解决方案

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

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

推荐阅读