Поместить изображение внутри в качестве фона кнопки при нажатии кнопки

Question

При нажатии на файл типа ввода я хочу показать выбранное изображение в качестве фона кнопки.

Но следующий код не помещается (закрывает) изображение внутри кнопки после выбора изображения.

Html

input#file {
  display: inline-block;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.3);
  width: 100%;
  padding: 400px 0 0 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  background-size: 60px 60px;
  cursor: pointer;
  border: none;
}

<input type='file' id="file" (change)="onSelectFile($event)" class="form-control btn btn-primary" [ngStyle]="{'background': 'url(' + imageURL + ') center center no-repeat #e4e4e4'}">

Компонент

onSelectFile(event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.readAsDataURL(event.target.files[0]);

    reader.onload = (event) => {
      this.imageURL = event.target.result;
    }
  }
}

Answer 1

Попробуйте добавить background-size к стилю рассматриваемой кнопки.По умолчанию auto показывает фактический размер, не подходит для контейнера.

Добавьте либо background-size: cover (изображение заполнит кнопку, но, возможно, не отобразит все изображение. Или background-size: contain (все изображениебудет вынужден вписаться в кнопку, даже если она выглядит раздавленной).

Answer 2

Стиль

background, который вы использовали в input, переписал background-size как center center. Вы должны использовать следующий код для установки background-size: cover.

[ngStyle]="{'background': 'url(' + imageURL + ') center center / cover no-repeat #e4e4e4'}"