Удалить границы и фон, когда изображение вставлено

Question

Я разработал ввод изображения. Моя проблема в том, что я не могу удалить границы и цвет фона при вставке изображения.

Кто-нибудь знает, как я могу это убрать. Можно ли заставить изображение занимать область 100% без искажения?

Спасибо

Демо

код

<div class="col-md-6" style="height:700px">
        <div style="height: 80%;">
          <div class="container" appDnd (fileDropped)="onFileDropped($event)">
            <input accept="image/*" type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
            <div class="abc" *ngIf="imageUrl">
              <img [src]="imageUrl" class="img-responsive drag" style="border-radius: 8px; object-fit: fill;">
            </div>
          </div>     
        </div>
      </div>

Задача

Answer 1

Попробуйте использовать ngStyle

<div class="container" appDnd (fileDropped)="onFileDropped($event)"
          [ngStyle]="fileDropRef.value ? {'background': 'none', 'border': 'none'} : {}">
            <input accept="image/*" type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
            {{fileDropRef.value}}
            <div class="abc" *ngIf="imageUrl">
              <img [src]="imageUrl" class="img-responsive drag" style="border-radius: 8px; object-fit: fill;">
            </div>
          </div>  

Снимок экрана

Answer 2

добавлено [ngClass]="(imageUrl) ? 'container has-image':'container'" и

&.has-image { padding: 0; border: none; }

&.has-image {
  padding: 0;
  border: none;
}

<div class="col-md-6" style="height:700px">
  <div style="height: 80%;">
    <div [ngClass]="(imageUrl) ? 'container has-image':'container'" appDnd (fileDropped)="onFileDropped($event)">
      <input accept="image/*" type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
      <div class="abc" *ngIf="imageUrl">
        <img [src]="imageUrl" class="img-responsive drag" style="border-radius: 8px; object-fit: fill;">
      </div>
    </div>
  </div>
</div>

Answer 3

Простой как:

app.component.ts:

      <div class="container" [class.uploaded]="imageUrl" appDnd (fileDropped)="onFileDropped($event)">
        <input accept="image/*" type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
        <div class="abc" *ngIf="imageUrl">
          <img [src]="imageUrl" class="img-responsive drag" style="border-radius: 8px; object-fit: fill;">
        </div>
      </div>  

app.component.s css:

    .container {
    ...
      &.uploaded {
        border: none;
        background: none;
      }
    }