HTML 弯曲圆中的中心图像

Question

我有个问题。 在我的 angular 项目中，我有以下代码：

 onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsDataURL(event.target.files[0]); }

 #upload-icon { align-items: center; font-size: 30px; }.image-content { width: 70px; height: 70px; } input[type="file"] { display: none; }.custom-file-upload { border: 1px solid #ccc; padding: 6px 12px; cursor: pointer; height: 70px; width: 70px; border-radius: 50%; display: flex; flex-direction: column; text-align: center; justify-content: center; } img { border-radius: 50%; height: 70px; width: 70px; object-fit: contain; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> <label class="custom-file-upload"> <input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input" (change)="onChange($event)"> <div class="image-content" *ngIf="!url"> <i class="far fa-images"></i> </div> <div class="image-content" *ngIf="url"> <label for="file-input"> <img [src]="url"/> </label> </div> </label>

现在我要做的是创建一个边框为 1 px 的圆圈。 在那篇文章中，我想显示一个图标，以表明您可以上传图像。 当您单击圆圈时，您可以 select 您的文件。 当您点击上传时，圆圈将被您的图片填充，但是当您再次点击您的图片时，您可以重新上传图片。 问题是图标和图像没有居中： 和

我怎样才能解决这个问题？

Answer 1

将图像和备用图标的最大高度和最大宽度设置为 100%，并替换text-align: center; align-items: center; 对于.custom-file-upload

更新了 HTML -

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<label class="custom-file-upload">
    <input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input"
           (change)="onChange($event)">
    <div class="image-content" *ngIf="!url">
        <i class="far fa-images icon"></i>
    </div>
    <div class="image-content" *ngIf="url">
        <label for="file-input">
            <img [src]="url"/>
        </label>
    </div>
</label>

更新了 CSS -

#upload-icon {
  align-items: center;
  font-size: 30px;
}

 .image-content {
  max-width: 100%;
  max-height: 100%;
}

input[type='file'] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  padding: 12px;
  cursor: pointer;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img,
.icon {
  max-height: 100%;
  max-width: 100%;
}

这里的工作示例

如果要覆盖整个分区，请使用图像作为背景图像 - 请参见此处的示例