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中使用的

input样式将background-size改写为center center。您应该使用以下代码来设置background-size: cover。

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

Answer 2

尝试将background-size添加到相关按钮的样式中。默认值为auto，它显示实际大小，不适合容器。

添加background-size: cover（图像将填充按钮，但可能不会显示整个图像。）或background-size: contain（即使图像被挤压，也将迫使整个图像适合按钮）

单击按钮时将图像放入背景按钮中

2 个答案: